Pertimbangkan sumbu utama dan sumbu silang wadah fleksibel:
Sumber: W3C
Untuk menyelaraskan item fleksibel di sepanjang sumbu utama ada satu properti:
Untuk menyelaraskan item fleksibel di sepanjang sumbu silang ada tiga properti:
Pada gambar di atas, sumbu utama adalah horisontal dan sumbu silang vertikal. Ini adalah arah default dari wadah fleksibel.
Namun, petunjuk arah ini dapat dengan mudah dipertukarkan dengan flex-direction
properti.
/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
(Sumbu silang selalu tegak lurus terhadap sumbu utama.)
Maksud saya dalam mendeskripsikan bagaimana kerja sumbu adalah bahwa sepertinya tidak ada yang istimewa dari kedua arah. Sumbu utama, sumbu silang, keduanya sama dalam hal kepentingan dan flex-direction
membuatnya mudah untuk bolak-balik.
Jadi mengapa sumbu silang mendapatkan dua properti pelurusan tambahan?
Mengapa align-content
dan align-items
dikonsolidasikan ke dalam satu properti untuk poros utama?
Mengapa sumbu utama tidak mendapatkan justify-self
properti?
Skenario di mana properti ini akan berguna:
menempatkan item fleksibel di sudut wadah fleksibel
#box3 { align-self: flex-end; justify-self: flex-end; }
membuat grup item fleksibel rata-rata (
justify-content: flex-end
) tetapi minta item pertama rata kiri (justify-self: flex-start
)Pertimbangkan bagian tajuk dengan sekelompok item nav dan logo. Dengan
justify-self
logo dapat disejajarkan ke kiri sementara item nav tetap paling kanan, dan semuanya menyesuaikan dengan lancar ("flexes") ke ukuran layar yang berbeda.dalam deretan tiga item fleksibel, tempelkan item tengah ke tengah wadah (
justify-content: center
) dan sejajarkan item yang berdekatan ke tepi wadah (justify-self: flex-start
danjustify-self: flex-end
).Perhatikan bahwa nilai-nilai
space-around
danspace-between
padajustify-content
properti tidak akan menjaga item tengah berpusat sekitar wadah jika item yang berdekatan memiliki lebar yang berbeda.
Pada tulisan ini, tidak ada disebutkan justify-self
atau justify-items
dalam spesifikasi flexbox .
Namun, dalam Modul Alignment Kotak CSS , yang merupakan proposal W3C yang belum selesai untuk membangun seperangkat properti penyelarasan yang umum untuk digunakan di semua model kotak, ada ini:
Sumber: W3C
Anda akan memperhatikan itu justify-self
dan justify-items
sedang dipertimbangkan ... tetapi tidak untuk flexbox .
Saya akan mengakhiri dengan mengulangi pertanyaan utama:
Mengapa tidak ada properti "justify-items" dan "justify-self"?
sumber
justify-self
bisa bekerja untuk item fleksibel? Misalkan Anda memiliki item a, b, c, d dengan ruang ekstra untuk mendistribusikan di sekitar mereka, dan wadah fleksibel memilikijustify-content: space-between
, sehingga mereka berakhir seperti | abcd |. Apa artinya menambahkan misalnyajustify-self: center
atau 'justify-self: flex-end` hanya ke item' b 'di sana? Ke mana Anda mengharapkannya? (Saya melihat beberapa demo di salah satu jawaban di sini, tetapi saya tidak melihat cara yang jelas bahwa itu akan berhasil secara umum.)justify-content: flex-start
, jadi barang-barang ramai di awal seperti | abcd |. Apa yang Anda harapkan untuk dilakukan, jika Anda memakaijustify-self: [anything]
item 'b' di sana?)justify-self
untuk bekerja untuk item fleksibel? Saya akan mengatakan tidak jauh berbeda dariauto
margin yang sudah bekerja pada item fleksibel. Dalam contoh kedua Anda,justify-self: flex-end
pada item d akan memindahkannya ke ujung. Itu sendiri akan menjadi fitur hebat, yangauto
sudah bisa dilakukan margin. Saya mengirim jawaban dengan demonstrasi.justify-content
danjustify-self
ditentukan, sehingga kasus dengan konflik (seperti skenario yang saya tanyakan) didefinisikan dengan jelas & masuk akal. Seperti yang saya catat dalam jawaban saya di sini,{justify|align}-self
adalah tentang menyelaraskan item dalam kotak yang lebih besar yang berukuran secara terpisah dari{justify|align}-self
nilai - dan tidak ada kotak seperti itu, pada sumbu utama, untuk item fleksibel yang akan disejajarkan.justify-self
danjustify-content
akan berinteraksi, dalam kasus di mana mereka bertentangan (seperti skenario yang saya paparkan). Margin otomatis sama sekali tidak berinteraksijustify-content
sama sekali - mereka mencuri semua ruang pengepakan sebelumjustify-content
mendapat kesempatan untuk menggunakannya. Jadi, margin otomatis tidak benar-benar analog untuk bagaimana ini akan bekerja.Jawaban:
Metode untuk Menyelaraskan Item Flex di sepanjang Sumbu Utama
Sebagaimana dinyatakan dalam pertanyaan:
Pertanyaannya kemudian bertanya:
Satu jawaban mungkin: Karena itu tidak perlu.
The spesifikasi flexbox menyediakan dua metode untuk menyelaraskan item fleksibel sepanjang sumbu utama:
justify-content
properti kata kunci, danauto
marginkonten-membenarkan
The
justify-content
disejajarkan properti melenturkan item sepanjang sumbu utama wadah fleksibel.Ini diterapkan pada wadah fleksibel tetapi hanya mempengaruhi item fleksibel.
Ada lima opsi pelurusan:
flex-start
~ Item Flex dikemas di awal baris.flex-end
~ Item Flex dikemas di akhir baris.center
~ Item Flex dikemas ke tengah garis.space-between
~ Item Flex diberi jarak secara merata, dengan item pertama sejajar dengan satu sisi wadah dan item terakhir sejajar dengan tepi yang berlawanan. Tepi yang digunakan oleh item pertama dan terakhir tergantung padaflex-direction
dan mode penulisan (ltr
ataurtl
).space-around
~ Sama sepertispace-between
kecuali dengan spasi setengah ukuran di kedua ujungnya.Margin Otomatis
Dengan
auto
margin , item fleksibel dapat dipusatkan, ditempatkan jauh atau dikemas ke dalam sub-kelompok.Tidak seperti
justify-content
, yang diterapkan pada wadah fleksibel,auto
margin tetap pada item fleksibel.Mereka bekerja dengan memakan semua ruang kosong ke arah yang ditentukan.
Sejajarkan kelompok item fleksibel ke kanan, tetapi item pertama ke kiri
Skenario dari pertanyaan:
Skenario berguna lainnya:
Tempatkan item fleksibel di sudut
Skenario dari pertanyaan:
Pusatkan item fleksibel secara vertikal dan horizontal
margin: auto
adalah alternatif untukjustify-content: center
danalign-items: center
.Alih-alih kode ini pada wadah fleksibel:
Anda dapat menggunakan ini pada item fleksibel:
Alternatif ini berguna ketika memusatkan item fleksibel yang meluap wadah .
Pusatkan item flex, dan pusatkan item flex kedua antara yang pertama dan yang tepi
Wadah fleksibel sejajar dengan barang fleksibel dengan mendistribusikan ruang kosong.
Oleh karena itu, untuk menciptakan keseimbangan yang sama , sehingga item tengah dapat dipusatkan di wadah dengan satu item di samping, penyeimbang harus diperkenalkan.
Dalam contoh di bawah, item fleksibel ketiga yang tidak terlihat (kotak 61 & 68) diperkenalkan untuk menyeimbangkan item "asli" (kotak 63 & 66).
Tentu saja, metode ini tidak ada yang hebat dalam hal semantik.
Atau, Anda dapat menggunakan elemen pseudo bukan elemen DOM yang sebenarnya. Atau Anda dapat menggunakan penentuan posisi absolut. Ketiga metode tersebut dibahas di sini: Pusat dan item fleks sejajar bawah
CATATAN: Contoh-contoh di atas hanya akan bekerja - dalam hal centering sejati - ketika item terluar sama dengan tinggi / lebar. Ketika item fleksibel memiliki panjang yang berbeda, lihat contoh berikut.
Pusatkan item fleksibel saat item yang berdekatan memiliki ukuran yang bervariasi
Skenario dari pertanyaan:
Seperti disebutkan, kecuali semua item fleksibel memiliki lebar atau tinggi yang sama (tergantung pada
flex-direction
), item tengah tidak dapat benar-benar berada di tengah. Masalah ini membuat kasus yang kuat untukjustify-self
properti (dirancang untuk menangani tugas, tentu saja).Tampilkan cuplikan kode
Berikut adalah dua metode untuk memecahkan masalah ini:
Solusi # 1: Penentuan Posisi Absolut
Spesifikasi flexbox memungkinkan pemosisian absolut item fleksibel . Ini memungkinkan item tengah terpusat sempurna terlepas dari ukuran saudara kandungnya.
Perlu diingat bahwa, seperti semua elemen yang benar-benar diposisikan, item dihapus dari aliran dokumen . Ini berarti mereka tidak memakan ruang dalam wadah dan bisa tumpang tindih dengan saudara mereka.
Pada contoh di bawah, item tengah dipusatkan dengan posisi absolut dan item luar tetap in-flow. Tetapi tata letak yang sama dapat dicapai secara terbalik: Pusatkan item tengah dengan
justify-content: center
dan posisikan sepenuhnya item luar.Solusi # 2: Kontainer Nested Flex (tidak ada penentuan posisi absolut)
Begini cara kerjanya:
.container
) adalah wadah fleksibel..box
) sekarang menjadi item fleksibel..box
item diberikanflex: 1
untuk mendistribusikan ruang kontainer secara merata.justify-content: center
.span
elemen adalah item flex terpusat.auto
margin fleksibel untuk menggeser bagian luarspan
kiri dan kanan.Anda juga bisa melupakan
justify-content
dan menggunakanauto
margin secara eksklusif.Tetapi
justify-content
dapat bekerja di sini karenaauto
margin selalu mendapat prioritas. Dari spec:justify-content: space-same (concept)
Kembali ke
justify-content
sebentar, ini ide untuk satu opsi lagi.space-same
~ Hibrida darispace-between
danspace-around
. Item fleksibel ditempatkan secara merata (sepertispace-between
), kecuali alih-alih ruang setengah ukuran di kedua ujungnya (sepertispace-around
), ada ruang berukuran penuh di kedua ujungnya.Tata letak ini dapat dicapai dengan
::before
dan::after
elemen semu pada wadah fleksibel.(kredit: @oriol untuk kode, dan @crl untuk label)
UPDATE: Browser sudah mulai menerapkan
space-evenly
, yang mencapai hal di atas. Lihat posting ini untuk detail: Ruang yang sama antara item fleksibelPLAYGROUND (termasuk kode untuk semua contoh di atas)
sumber
justify-content
danauto
margin. Untuk sisi lain dari koin - yang lintas-axis ,align-items
,align-self
danalign-content
- lihat posting ini: stackoverflow.com/q/42613359/3597276justify-self
properti ...auto
margin sangat membantu, tetapijustify-self: center
akan ideal. Cara untuk memecahkan masalah yang Anda sajikan adalah dengan membuat item duplikat yang tidak terlihat di sisi yang berlawanan. Lihat jawaban saya di sini: stackoverflow.com/q/38948102/3597276space-same
Konsep Anda adalah hal yang nyata sekarang. Namanyaspace-evenly
, tetapi saat ini hanya didukung oleh Firefox: developer.mozilla.org/en-US/docs/Web/CSS/justify-contentspace-evenly
jawaban lain: stackoverflow.com/q/45134400/3597276space-evenly
itu didukung dalam Chrome 57-60, tapi hanya untuk tata letak Grid. Itu adalah bug yang telah diperbaiki, dan sejak Chrome 61 itu didukung di sana untuk Flexbox juga. Juga, ada cara untuk meniru tanpa pseudo-elemen:.item { margin-right: auto } .item:first-child { margin-left: auto }
.Saya tahu ini bukan jawaban, tetapi saya ingin berkontribusi dalam masalah ini untuk apa nilainya. Akan lebih bagus jika mereka bisa merilis
justify-self
untuk flexbox untuk membuatnya benar-benar fleksibel.Ini keyakinan saya bahwa ketika ada banyak item pada poros, cara paling logis untuk
justify-self
berperilaku adalah untuk menyelaraskan diri dengan tetangga terdekat (atau tepi) seperti yang ditunjukkan di bawah ini.Saya benar-benar berharap, W3C memperhatikan hal ini dan setidaknya akan mempertimbangkannya. =)
Dengan cara ini Anda dapat memiliki item yang benar-benar terpusat terlepas dari ukuran kotak kiri dan kanan. Ketika salah satu kotak mencapai titik kotak pusat itu hanya akan mendorongnya sampai tidak ada lagi ruang untuk mendistribusikan.
Kemudahan membuat tata letak yang luar biasa tidak ada habisnya, lihat contoh "kompleks" ini.
sumber
justify-self
danjustify-items
.auto
margin bukan pengganti lengkapjustify-self
. Saya berhati-hati untuk mengatakan komentar saya sebelumnya dengan mengatakanauto
margin akan mencakup beberapa kasus penggunaan . Seperti yang Anda catat, itu tidak dapat memusatkan item di tempat ketika item yang berdekatan memiliki ukuran yang berbeda. Namun, ia menyediakan lebih banyak opsi untuk menyelaraskan item fleksibel. Ketika saya pertama kali mulai belajar tentang flexbox, saya pikirjustify-content
dan item spacer yang tidak terlihat adalah satu-satunya cara.Ini ditanyakan pada daftar gaya www, dan Tab Atkins (editor spec) memberikan jawaban yang menjelaskan alasannya . Saya akan menguraikannya sedikit di sini.
Untuk memulainya, mari kita asumsikan wadah fleksibel kami adalah satu-baris (
flex-wrap: nowrap
). Dalam hal ini, jelas ada perbedaan penyelarasan antara sumbu utama dan sumbu silang - ada beberapa item yang ditumpuk di sumbu utama, tetapi hanya satu item yang ditumpuk di sumbu silang. Jadi masuk akal untuk memiliki "align-self" per item yang dapat disesuaikan pada sumbu silang (karena setiap item disejajarkan secara terpisah, dengan sendirinya), sedangkan itu tidak masuk akal dalam sumbu utama (karena di sana, item disejajarkan secara kolektif).Untuk multi-line flexbox, logika yang sama berlaku untuk setiap "flex line". Dalam garis yang diberikan, item disejajarkan secara individual di sumbu silang (karena hanya ada satu item per baris, di sumbu silang), vs secara kolektif di sumbu utama.
Berikut adalah cara lain dari ungkapan itu: jadi, semua dari
*-self
dan*-content
sifat sekitar bagaimana mendistribusikan ruang ekstra di sekitar hal. Tetapi perbedaan utama adalah bahwa*-self
versi untuk kasus-kasus di mana hanya ada satu hal dalam sumbu itu , dan*-content
versi untuk ketika ada banyak hal yang berpotensi dalam sumbu itu . Satu-hal vs banyak-hal skenario berbagai jenis masalah, sehingga mereka memiliki berbagai jenis pilihan yang tersedia - misalnya,space-around
/space-between
nilai masuk akal bagi*-content
, tetapi tidak untuk*-self
.SO: Dalam sumbu utama flexbox, ada banyak hal untuk mendistribusikan ruang sekitar. Jadi sebuah
*-content
properti masuk akal di sana, tetapi bukan a*-self
properti.Sebaliknya, pada sumbu silang, kami memiliki properti
*-self
a dan*-content
properti. Yang satu menentukan bagaimana kami akan mendistribusikan ruang di sekitar banyak garis fleksibel (align-content
), sedangkan yang lain (align-self
) menentukan cara mendistribusikan ruang di sekitar individu item fleksibel dalam sumbu silang, dalam garis fleksibel tertentu.(Saya mengabaikan
*-items
properti di sini, karena mereka hanya menetapkan default untuk*-self
.)sumber
justify-self
bisa menjadi masalah pada sumbu dengan beberapa item yang bertentangan dengan satu item. Namun saya sangat berharap mereka akan memeriksanya lebih lanjut, dalam situasi beberapa item bagaimana akanjustify-self
berperilaku, karena ada beberapa situasi di mana ini bisa sangat berguna. Misalnya ( stackoverflow.com/questions/32378953/… ).justify-self
.*-self
dengan kasus di mana kita hanya memiliki satu hal untuk disejajarkan sedangkan*-content
tentang kasus di mana kita memiliki banyak hal untuk disejajarkan. Apakah itu membuatnya sedikit lebih jelas?auto
margin, juga bagian dari spek, memungkinkan *-alignment diri dengan banyak item di baris. Tidak ada alasan jelas mengapa properti kata kunci tidak bisa juga.Saya tahu ini tidak menggunakan flexbox, tetapi untuk kasus penggunaan sederhana dari tiga item (satu di kiri, satu di tengah, satu di kanan), ini dapat dicapai dengan mudah menggunakan
display: grid
pada orang tua,grid-area: 1/1/1/1;
pada anak-anak, danjustify-self
untuk penentuan posisi anak-anak itu.sumber
Saya baru saja menemukan solusi saya sendiri untuk masalah ini, atau setidaknya masalah saya.
Saya menggunakan
justify-content: space-around
sebagai gantinyajustify-content: space-between;
.Dengan cara ini elemen ujung akan menempel di atas dan bawah, dan Anda dapat memiliki margin khusus jika Anda inginkan.
sumber