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

678

Pertimbangkan sumbu utama dan sumbu silang wadah fleksibel:

masukkan deskripsi gambar di sini                                                                                                                                                    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-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.

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:

masukkan deskripsi gambar di sini                                                                                                                                                    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"?

Michael Benjamin
sumber
4
Bagaimana Anda berharap justify-selfbisa bekerja untuk item fleksibel? Misalkan Anda memiliki item a, b, c, d dengan ruang ekstra untuk mendistribusikan di sekitar mereka, dan wadah fleksibel memiliki justify-content: space-between, sehingga mereka berakhir seperti | abcd |. Apa artinya menambahkan misalnya justify-self: centeratau '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.)
dholbert
(Bergantian: seandainya kita punya justify-content: flex-start, jadi barang-barang ramai di awal seperti | abcd |. Apa yang Anda harapkan untuk dilakukan, jika Anda memakai justify-self: [anything]item 'b' di sana?)
dholbert
1
@ Dolbert, Anda menulis: Bagaimana Anda berharap justify-selfuntuk bekerja untuk item fleksibel? Saya akan mengatakan tidak jauh berbeda dari automargin yang sudah bekerja pada item fleksibel. Dalam contoh kedua Anda, justify-self: flex-endpada item d akan memindahkannya ke ujung. Itu sendiri akan menjadi fitur hebat, yang autosudah bisa dilakukan margin. Saya mengirim jawaban dengan demonstrasi.
Michael Benjamin
2
Saya sebagian besar melihat lebih banyak kasus penggunaan di sini, dan kasus penggunaan sangat bagus - tetapi bagian yang sulit adalah bagaimana memilih ini dengan cara yang sebenarnyajustify-content dan justify-selfditentukan, 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}-selfadalah tentang menyelaraskan item dalam kotak yang lebih besar yang berukuran secara terpisah dari {justify|align}-selfnilai - dan tidak ada kotak seperti itu, pada sumbu utama, untuk item fleksibel yang akan disejajarkan.
dholbert
1
RE "tidak berbeda dengan margin otomatis" - Saya sebenarnya bertanya tentang bagaimana Anda membayangkan justify-selfdan justify-contentakan berinteraksi, dalam kasus di mana mereka bertentangan (seperti skenario yang saya paparkan). Margin otomatis sama sekali tidak berinteraksi justify-contentsama sekali - mereka mencuri semua ruang pengepakan sebelum justify-contentmendapat kesempatan untuk menggunakannya. Jadi, margin otomatis tidak benar-benar analog untuk bagaimana ini akan bekerja.
dholbert

Jawaban:

1255

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.

    masukkan deskripsi gambar di sini

  • flex-end ~ Item Flex dikemas di akhir baris.

    masukkan deskripsi gambar di sini

  • center ~ Item Flex dikemas ke tengah garis.

    masukkan deskripsi gambar di sini

  • 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).

    masukkan deskripsi gambar di sini

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

    masukkan deskripsi gambar di sini


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.

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini


Skenario berguna lainnya:

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini


Tempatkan item fleksibel di sudut

Skenario dari pertanyaan:

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

masukkan deskripsi gambar di sini


Pusatkan item fleksibel secara vertikal dan horizontal

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

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

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.

masukkan deskripsi gambar di sini

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.

masukkan deskripsi gambar di sini

(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)

Michael Benjamin
sumber
1
Jawaban di atas mencakup sumbu utama , justify-contentdanauto margin. Untuk sisi lain dari koin - yang lintas-axis , align-items, align-selfdan align-content- lihat posting ini: stackoverflow.com/q/42613359/3597276
Michael Benjamin
4
@ MarkW, Anda membuat kasing untuk justify-self properti ... automargin sangat membantu, tetapi justify-self: centerakan 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/3597276
Michael Benjamin
5
space-sameKonsep Anda adalah hal yang nyata sekarang. Namanya space-evenly, tetapi saat ini hanya didukung oleh Firefox: developer.mozilla.org/en-US/docs/Web/CSS/justify-content
benface
1
@ wajah, Ya, Anda benar. Terima kasih telah menunjukkannya. Saya sebenarnya telah menulis tentang space-evenlyjawaban lain: stackoverflow.com/q/45134400/3597276
Michael Benjamin
1
Bahkan, space-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 }.
Ilya Streltsyn
155

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. =)

masukkan deskripsi gambar di sini

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.

masukkan deskripsi gambar di sini

Kemudahan membuat tata letak yang luar biasa tidak ada habisnya, lihat contoh "kompleks" ini.

masukkan deskripsi gambar di sini

Menandai
sumber
12
@Ark, ini luar biasa! Terima kasih telah meluangkan waktu untuk menyusun konsep ini. Saya harap Anda tidak keberatan, tetapi saya sudah mengirimkannya di sini: discourse.wicg.io/t/flexbox-justify-self-property/1146
Zaqx
1
@ Zaqx yakin, semakin banyak pencahayaan semakin baik. Sungguh-sungguh berharap mereka akan menemukan cara untuk membuat kenyataan ini, akan senang membuat tangan saya kotor dalam hal ini.
Tandai
1
Hai Mark, @Zaqx, saya mengirim jawaban yang mungkin mencakup beberapa kasus penggunaan yang disebutkan dalam jawaban ini. Saya telah menemukan bahwa banyak yang masih dapat dilakukan di poros utama tanpa perlu justify-selfdan justify-items.
Michael Benjamin
3
@Michael_B Senang Anda mengetahui lebih banyak tentang flexbox dan menghargai bahwa Anda meluangkan waktu untuk memformat catatan Anda menjadi jawaban. Margin: otomatis memang keren (walaupun Anda akan menemukan browser yang menerapkan versi flexbox 2009 dan 2012 tidak memiliki fitur setara yang secara drastis mengurangi kemampuan untuk menggunakannya di situs produksi). Namun, bahkan dengan browser yang mendukung margin: otomatis, kasus penggunaan utama di sini dari item yang berpusat relatif terhadap wadahnya sementara ruang yang ada masih tidak mungkin tanpa properti yang dapat dibenarkan sendiri atau serupa.
Zaqx
1
@Zaqx, terima kasih atas umpan baliknya. Dan ya, saya setuju dengan Anda, automargin bukan pengganti lengkap justify-self. Saya berhati-hati untuk mengatakan komentar saya sebelumnya dengan mengatakan automargin 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 pikir justify-contentdan item spacer yang tidak terlihat adalah satu-satunya cara.
Michael Benjamin
20

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

dholbert
sumber
1
Saya mengerti bagaimana justify-selfbisa 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 akan justify-selfberperilaku, karena ada beberapa situasi di mana ini bisa sangat berguna. Misalnya ( stackoverflow.com/questions/32378953/… ).
Markus
Nice ditemukan di milis itu. Mencoba untuk membungkus kepala saya di sekitarnya, karena saya masih melihat kemungkinan penggunaan kasus yang baik untuk justify-self.
Michael Benjamin
Saya menambahkan sedikit klarifikasi, menjelaskan bagaimana *-selfdengan kasus di mana kita hanya memiliki satu hal untuk disejajarkan sedangkan *-contenttentang kasus di mana kita memiliki banyak hal untuk disejajarkan. Apakah itu membuatnya sedikit lebih jelas?
dholbert
Ya, lebih jelas. Saya menghargai penjelasannya. Tapi sepertinya semua bermuara pada preferensi sederhana oleh penulis spec, bukan kebutuhan khusus berdasarkan logika. Dari milis yang Anda referensikan : Properti * -self hanya berfungsi jika anak sendirian di poros itu. Mengapa? Sepertinya tidak ada kebutuhan untuk ini. Ini keputusan yang sewenang-wenang. Preferensi. Bahkan, automargin, juga bagian dari spek, memungkinkan *-alignment diri dengan banyak item di baris. Tidak ada alasan jelas mengapa properti kata kunci tidak bisa juga.
Michael Benjamin
1

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>

Venryx
sumber
Terima kasih atas jawabannya, tetapi itu tidak benar-benar menjawab pertanyaan itu. Juga, ada cara yang lebih sederhana untuk menyelesaikan tata letak Anda: jsfiddle.net/fga89m2o
Michael Benjamin
0

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.

Leif Messinger LOAF
sumber