Bagaimanakah Saya Boleh Memastikan Lebar Sama untuk Semua Elemen dalam Reka Letak Flexbox?

Flexbox: Memastikan Lebar Sama untuk Semua Elemen

Dalam percubaan untuk mencipta bar navigasi flexbox responsif dengan kuantiti item yang berbeza-beza, pembangun mungkin menghadapi isu di mana taburan lebar antara elemen adalah tidak sekata. Artikel ini meneroka penyelesaian kepada cabaran ini.

Latar Belakang

Tutorial diikuti pada mulanya digunakan display:table untuk mencapai pengedaran lebar yang sama, tetapi menghadapi masalah apabila beralih ke flexbox. Flexbox lalai flex-basis kepada auto, yang menggunakan saiz kandungan sebagai saiz awal untuk setiap item flex. Akibatnya, item dengan saiz kandungan yang lebih besar menempati lebih banyak ruang.

Penyelesaian: Flex-basis hingga 0

Untuk memastikan lebar yang sama untuk semua elemen, kami menetapkan asas-flex kepada 0. Ini menghapuskan permulaan saiz, meninggalkan semua ruang yang tinggal untuk diagihkan secara berkadar berdasarkan flex-grow.

Contoh

Coretan kod berikut menunjukkan cara menetapkan asas-flex kepada 0 menyelesaikan isu:

li {
  flex-grow: 1;
  flex-basis: 0;
  /* ... */
}

Penjelasan Visual

Rajah di bawah daripada spesifikasi CSS Flexbox menggambarkan konsep flex-basis:

[Rajah dari spesifikasi CSS Flexbox]

Contoh Kerja

Rujuk Fiddle yang diubah suai untuk melihat taburan lebar yang sama:

[Bekerja Biola]

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Lebar Sama untuk Semua Elemen dalam Reka Letak Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!