Bagaimanakah Saya Boleh Membetulkan Lebar Tidak Sama Dalam Navigasi Flexbox Saya?

Menyelesaikan Masalah Flexbox untuk Lebar Unsur Tidak Sama

Apabila mencipta susun atur navigasi flexbox, adalah penting untuk mencapai pengagihan lebar yang sekata antara elemen. Walau bagaimanapun, kadangkala anda mungkin menghadapi masalah apabila elemen berbeza dari segi saiz. Ini boleh timbul disebabkan oleh pengaruh flex-basis, sifat yang mentakrifkan saiz awal item flex.

Default Flex-Basis

Secara lalai, flex-basis ditetapkan kepada auto, yang bermaksud saiz awal item flex ditentukan oleh saiz kandungannya. Dalam contoh anda, elemen dengan lebih banyak kandungan teks akan menerima lebih banyak ruang kerana asas-flexnya lebih besar.

Menetapkan Flex-Basis kepada Sifar

Untuk memastikan pengedaran lebar yang sama, anda boleh menetapkan flex- asas kepada 0 untuk semua elemen. Ini akan menetapkan semula saiz awalnya, membenarkan mana-mana ruang yang tinggal dibahagikan secara berkadar berdasarkan flex-grow, yang ditetapkan kepada 1 secara lalai. Berikut ialah kod yang dikemas kini:

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

Contoh Fiddle

Pelarasan kod ini membawa kepada hasil yang diingini, dengan semua elemen dalam navigasi flexbox anda mempunyai lebar yang sama:

[Dikemas kini Fiddle](https://fiddle.jshell.net/h2db4yxw/11/)

Visualisasi

Rajah berikut daripada spesifikasi flexbox menggambarkan konsep asas-flex dan kesannya pada elemen saiz:

[Rajah asas lentur daripada kotak lentur spesifikasi](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Lebar Tidak Sama Dalam Navigasi Flexbox Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!