Di CSS Flexbox, mengapa tidak ada properti "justify-items" dan "justify-self"?

Pertimbangkan sumbu utama dan sumbu silang wadah fleksibel:

                                                                                                                                                   _{Sumber: W3C}

Untuk menyelaraskan item fleksibel di sepanjang sumbu utama ada satu properti:

• justify-content

Untuk menyelaraskan item fleksibel di sepanjang sumbu silang ada tiga properti:

• align-content
• align-items
• align-self

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-directionproperti.

/* 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-directionmembuatnya mudah untuk bolak-balik.

Jadi mengapa sumbu silang mendapatkan dua properti pelurusan tambahan?

Mengapa align-contentdan align-itemsdikonsolidasikan ke dalam satu properti untuk poros utama?

Mengapa sumbu utama tidak mendapatkan justify-selfproperti?

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-selflogo 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-startdan justify-self: flex-end).

  Perhatikan bahwa nilai-nilai space-arounddan space-betweenpada justify-contentproperti tidak akan menjaga item tengah berpusat sekitar wadah jika item yang berdekatan memiliki lebar yang berbeda.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

versi jsFiddle

Pada tulisan ini, tidak ada disebutkan justify-selfatau justify-itemsdalam 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-selfdan justify-itemssedang dipertimbangkan ... tetapi tidak untuk flexbox .

Saya akan mengakhiri dengan mengulangi pertanyaan utama:

Mengapa tidak ada properti "justify-items" dan "justify-self"?

Metode untuk Menyelaraskan Item Flex di sepanjang Sumbu Utama

Sebagaimana dinyatakan dalam pertanyaan:

Untuk menyelaraskan item fleksibel di sepanjang sumbu utama ada satu properti: justify-content

Untuk item fleksibel menyelaraskan sepanjang sumbu silang ada tiga sifat: align-content, align-itemsdanalign-self .

Pertanyaannya kemudian bertanya:

Mengapa tidak ada justify-itemsdan justify-selfproperti?

Satu jawaban mungkin: Karena itu tidak perlu.

The spesifikasi flexbox menyediakan dua metode untuk menyelaraskan item fleksibel sepanjang sumbu utama:

1. The justify-contentproperti kata kunci, dan
2. auto margin

konten-membenarkan

The justify-contentdisejajarkan 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 pada flex-directiondan mode penulisan ( ltratau rtl).

  

• space-around~ Sama seperti space-betweenkecuali dengan spasi setengah ukuran di kedua ujungnya.

  

Margin Otomatis

Dengan automargin , item fleksibel dapat dipusatkan, ditempatkan jauh atau dikemas ke dalam sub-kelompok.

Tidak seperti justify-content, yang diterapkan pada wadah fleksibel, automargin 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:

• 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-selflogo dapat disejajarkan ke kiri sementara item nav tetap paling kanan, dan semuanya menyesuaikan dengan lancar ("flexes") ke ukuran layar yang berbeda.

Skenario berguna lainnya:

Tempatkan item fleksibel di sudut

Skenario dari pertanyaan:

• menempatkan item fleksibel di sudut .box { align-self: flex-end; justify-self: flex-end; }

Pusatkan item fleksibel secara vertikal dan horizontal

margin: autoadalah alternatif untuk justify-content: centerdan align-items: center.

Alih-alih kode ini pada wadah fleksibel:

.container {
    justify-content: center;
    align-items: center;
}

Anda dapat menggunakan ini pada item fleksibel:

.box56 {
    margin: auto;
}

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:

• 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-startdan justify-self: flex-end).

  Perhatikan bahwa nilai-nilai space-arounddan space-betweenpada justify-contentproperti tidak akan menjaga item tengah berpusat dalam kaitannya dengan wadah jika item yang berdekatan memiliki lebar yang berbeda ( lihat demo ).

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 untuk justify-selfproperti (dirancang untuk menangani tugas, tentu saja).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

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: centerdan posisikan sepenuhnya item luar.

Solusi # 2: Kontainer Nested Flex (tidak ada penentuan posisi absolut)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Begini cara kerjanya:

• Div tingkat atas ( .container) adalah wadah fleksibel.
• Setiap div anak ( .box) sekarang menjadi item fleksibel.
• Setiap .boxitem diberikan flex: 1untuk mendistribusikan ruang kontainer secara merata.
• Sekarang item mengkonsumsi semua ruang di baris dan lebarnya sama.
• Jadikan setiap item sebagai wadah fleksibel (bersarang) dan tambahkan justify-content: center.
• Sekarang setiap spanelemen adalah item flex terpusat.
• Gunakan automargin fleksibel untuk menggeser bagian luar spankiri dan kanan.

Anda juga bisa melupakan justify-contentdan menggunakan automargin secara eksklusif.

Tetapi justify-contentdapat bekerja di sini karena automargin selalu mendapat prioritas. Dari spec:

8.1. Menyelaraskan dengan auto margin

Sebelum penyelarasan melalui justify-contentdan align-self, setiap ruang bebas positif didistribusikan ke margin otomatis di dimensi itu.

justify-content: space-same (concept)

Kembali ke justify-contentsebentar, ini ide untuk satu opsi lagi.

• space-same~ Hibrida dari space-betweendan space-around. Item fleksibel ditempatkan secara merata (seperti space-between), kecuali alih-alih ruang setengah ukuran di kedua ujungnya (seperti space-around), ada ruang berukuran penuh di kedua ujungnya.

Tata letak ini dapat dicapai dengan ::beforedan ::afterelemen 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 fleksibel

PLAYGROUND (termasuk kode untuk semua contoh di atas)

Saya tahu ini bukan jawaban, tetapi saya ingin berkontribusi dalam masalah ini untuk apa nilainya. Akan lebih bagus jika mereka bisa merilis justify-selfuntuk flexbox untuk membuatnya benar-benar fleksibel.

Ini keyakinan saya bahwa ketika ada banyak item pada poros, cara paling logis untuk justify-selfberperilaku 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.

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 *-selfdan *-contentsifat sekitar bagaimana mendistribusikan ruang ekstra di sekitar hal. Tetapi perbedaan utama adalah bahwa *-selfversi untuk kasus-kasus di mana hanya ada satu hal dalam sumbu itu , dan *-contentversi 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-betweennilai masuk akal bagi *-content, tetapi tidak untuk*-self .

SO: Dalam sumbu utama flexbox, ada banyak hal untuk mendistribusikan ruang sekitar. Jadi sebuah *-contentproperti masuk akal di sana, tetapi bukan a*-self properti.

Sebaliknya, pada sumbu silang, kami memiliki properti *-selfa dan *-contentproperti. 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 *-itemsproperti di sini, karena mereka hanya menetapkan default untuk *-self.)

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: gridpada orang tua, grid-area: 1/1/1/1;pada anak-anak, dan justify-selfuntuk penentuan posisi anak-anak itu.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Saya baru saja menemukan solusi saya sendiri untuk masalah ini, atau setidaknya masalah saya.
Saya menggunakan justify-content: space-aroundsebagai gantinya justify-content: space-between;.

Dengan cara ini elemen ujung akan menempel di atas dan bawah, dan Anda dapat memiliki margin khusus jika Anda inginkan.