Bagaimanakah Saya Boleh Mengagihkan Lebar Secara Sekata Di Antara Elemen Flexbox dengan Kandungan Berbeza?

Flexbox: Mengagihkan Lebar Sekata Antara Elemen

Dalam usaha untuk mencipta navigasi flexbox dengan bilangan item yang berbeza-beza (antara 3 dan 5) , anda menghadapi masalah di mana lebar tidak diagihkan sama rata antara unsur. Untuk menangani perkara ini, adalah penting untuk memahami "asas fleksibel."

"asas fleksibel" ialah sifat penting dalam flexbox yang pada asasnya menetapkan saiz awal item flex. Secara lalai, ia ditetapkan kepada "auto", yang bermaksud saiz item flex ditentukan oleh kandungannya. Oleh itu, item dengan kandungan teks yang lebih besar secara semula jadi akan mengambil lebih banyak ruang.

Untuk memastikan pengagihan yang sama, adalah disyorkan untuk menetapkan "asas fleksibel" kepada 0. Ini menetapkan saiz awal kepada 0 dan mana-mana ruang yang tinggal akan diagihkan secara berkadar berdasarkan "flex-grow."

Berikut ialah coretan kod anda yang dikemas kini dengan "flex-basis" ditetapkan kepada 0:

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

Pelarasan ini akan menghasilkan pengagihan lebar yang sekata antara item navigasi anda, tanpa mengira saiz kandungannya. Di bawah ialah contoh yang berfungsi untuk demonstrasi: [pautan ke biola yang dikemas kini]

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengagihkan Lebar Secara Sekata Di Antara Elemen Flexbox dengan Kandungan Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!