Bagaimanakah Saya Boleh Membuat Item Flexbox Menduduki Lebar Yang Sama?

Mengedarkan Item Flexbox Secara Seragam

Flexbox telah mendapat populariti sebagai kaedah susun atur serba boleh, namun ia cenderung untuk mengagihkan ruang di sekeliling item secara sama rata dan bukannya barang sendiri. Untuk menangani cabaran ini, mari kita terokai penyelesaian untuk memastikan semua item flexbox menempati lebar yang sama.

Flexbox beroperasi pada prinsip menumbuhkan dan mengecut item berdasarkan sifat flex-grow mereka. Secara lalai, flex-grow ditetapkan kepada 0, menyebabkan item dipaparkan dengan lebar semula jadinya. Walau bagaimanapun, kami boleh mengubah suai sifat ini untuk mencapai hasil yang kami inginkan.

Untuk mencipta item dengan lebar yang sama, tetapkan asas lenturnya kepada 0. Ini mewujudkan titik permulaan yang sama untuk semua elemen. Selain itu, benarkan item berkembang dengan menetapkan flex-grow kepada 1. Ini akan memastikan ia berkembang sama rata untuk memenuhi ruang yang tersedia.

Kod CSS berikut menunjukkan pendekatan ini:

.header {
  display: flex;
}

.item {
  flex: 1 1 0px;
  text-align: center;
  border: 1px solid black;
}

Dengan menetapkan flex-basis kepada 0 dan flex-grow kepada 1, semua item dalam kelas .item akan mempunyai jumlah ruang yang sama, tanpa mengira kandungannya. Ini menghapuskan taburan tidak sekata yang diperhatikan dalam contoh asal.

Nota: Sesetengah IDE dan linters mungkin mencadangkan agar unit 'px' digugurkan daripada flex. Walau bagaimanapun, mengekalkannya memastikan pemaparan yang betul dalam Internet Explorer.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Item Flexbox Menduduki Lebar Yang Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!