Bagaimanakah Saya Boleh Mengagihkan Elemen Lebar Tidak Sekata Menggunakan Flexbox?

Flexbox Mengedarkan Lebar Tidak Sekata kepada Elemen

Masalah:

Anda menggunakan Flexbox untuk mencipta navigasi mendatar dengan bilangan item yang berbeza-beza (3-5), tetapi lebarnya tidak diagihkan sama rata antara mereka.

Analisis:

Flexbox melalaikan sifat flex-basis kepada "auto", yang bermaksud elemen bersaiz berdasarkan kandungannya. Dalam contoh anda, elemen dengan kandungan teks yang lebih besar menggunakan lebih banyak ruang.

Penyelesaian:

Untuk memastikan pengagihan sama, tetapkan asas-flex: 0. Ini menetapkan asas lentur awal kepada sifar, membenarkan ruang yang selebihnya diagihkan secara berkadar berdasarkan flex-grow. Nilai flex-grow mesti ditetapkan untuk memastikan semuanya berkembang sama rata.

Kod:

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

Penjelasan:

Nilai sifar untuk asas fleksibel memastikan item navigasi bermula dengan saiz yang sama, tanpa mengira kandungan. Kemudian, flex-grow 1 menyebabkan mereka mengembang sama untuk memenuhi ruang yang tinggal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengagihkan Elemen Lebar Tidak Sekata Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!