Penggunaan indah gabungan `flex: 1; Lebar: 0; `Dalam susun atur flex: Kenapa elemen anak pertama dapat dipaparkan secara normal selepas elemen anak kedua ditetapkan ke` lebar: 0; `?

Kemahiran Layout Flex: Gunakan flex: 1; width: 0; Selesaikan masalah elemen kanak -kanak yang memerah

Susun atur flex digunakan secara meluas dalam susun atur web, tetapi kadang -kadang ia menemui masalah unsur -unsur kanak -kanak yang memerah satu sama lain. Artikel ini akan meneroka secara mendalam penggunaan flex: 1; width: 0; Gabungan dan bagaimana untuk mengelakkan keadaan di mana sub-elemen dalam bekas Flex diperas.

Coretan kod berikut menunjukkan masalah biasa: bekas flex mengandungi dua elemen kanak -kanak, elemen kanak -kanak pertama menetapkan lebar tetap, dan elemen kanak -kanak kedua mengambil ruang yang tinggal, mengakibatkan elemen kanak -kanak pertama hampir tidak kelihatan.

<div style="width: 350px; display: flex;">
    <div style="width: 50px; height: 50px; background-color: blanchedalmond;"></div>
    <div style="flex: 1; width: 0; white-space: nowrap;">
        <div>Susun atur CSS3 Flex, teks melebihi susun atur. CSS3 Flex, teks melebihi. CSS3 Flex Layout, teks melebihi. CSS3 Flex Layout, teks melebihi.</div>
    </div>
</div>

Kenapa elemen anak pertama boleh dipaparkan secara normal selepas menambah width: 0; ke elemen anak kedua? Kuncinya terletak pada mekanisme peruntukan ruang susun atur flex.

Apabila display: flex , elemen kanak -kanak menjadi projek Flex. Susun atur Flex memperuntukkan ruang mengikut sifat projek. Secara lalai, item min-width dan min-height adalah auto . Jika width ditetapkan hanya untuk satu projek, dan lebar projek lain tidak ditentukan, item dengan set width boleh dimampatkan. Inilah sebabnya elemen pertama dalam kod di atas diperas.

Walau bagaimanapun, apabila projek kedua menetapkan width: 0; dan flex: 1; Pada masa yang sama, keadaan berubah. Susun atur Flex mengira lebar semua item. width: auto bergantung kepada jenis elemen: unsur-unsur peringkat blok mewakili penggunaan penuh ruang yang tersedia, dan unsur-unsur sebaris mewakili mengecut ke saiz yang sesuai.

Gabungan width: 0; dan flex: 1; Membolehkan projek kedua tidak mengambil ruang. flex: 1 memperuntukkan ruang yang tinggal (350px - 50px = 300px) kepadanya. Dengan cara ini, elemen pertama tidak akan diperah.

Walaupun min-width atau width: 0; Boleh menyelesaikan masalah ini, disyorkan untuk menggunakan flex-shrink: 0; Untuk mengelakkan elemen pertama daripada dimampatkan, yang lebih sesuai dengan konsep reka bentuk susun atur flex.

Atas ialah kandungan terperinci Penggunaan indah gabungan `flex: 1; Lebar: 0; `Dalam susun atur flex: Kenapa elemen anak pertama dapat dipaparkan secara normal selepas elemen anak kedua ditetapkan ke` lebar: 0; `?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!