Mengapa Barangan Fleksibel Saya Tidak Membungkus pada Berbilang Baris?

Mengapa Item Flex Tidak Dibalut?

Apabila cuba mencipta berbilang baris elemen dalam bekas fleksibel, tetapi sebaliknya menyaksikan semuanya terhad kepada satu garisan melimpah, ia berkemungkinan disebabkan oleh pembalut lentur lalai hartanah.

Gelagat flex-wrap lalai

Secara lalai, bekas flex mempunyai sifat flex-wrap yang ditetapkan kepada nowrap. Ini bermakna semua elemen anak ("item fleksibel") dihadkan kepada satu baris, tanpa mengira lebar kolektifnya. Akibatnya, apabila lebar gabungan item flex melebihi bekas induknya, ia melimpah dan muncul pada baris yang sama.

Membetulkan Isu: Menetapkan flex-wrap kepada wrap

Untuk membolehkan item flex dibalut pada berbilang baris, sifat flex-wrap perlu ditetapkan kepada balut. Ini membolehkan elemen mengalir secara semula jadi, membalut dari satu baris ke baris seterusnya apabila lebar bekas dicapai.

.bekas {
paparan: flex;
flex- bungkus: balut;
}

Contoh Pembalut Fleksibel

Pertimbangkan contoh berikut:

< ;pra>
.bekas {
paparan: lentur;
balut lentur: balut;
lebar: 600px;
}

.item {
lebar: 200px;
tinggi: 200px;
latar belakang- warna: biru;
margin: 5px;
}

Kod ini mencipta bekas fleksibel dengan lebar tetap 600px. Di dalam bekas ini terdapat tiga item fleksibel, setiap satu dengan lebar 200px. Dengan set flex-wrap untuk membalut, item flex akan secara automatik membalut agar muat dalam lebar bekas.

Ringkasnya, untuk membolehkan item flex membalut pada berbilang baris, pastikan sifat flex-wrap ditetapkan dengan jelas untuk membalut. Ini akan membolehkan mereka mengalir secara semula jadi dalam dimensi bekas.

Atas ialah kandungan terperinci Mengapa Barangan Fleksibel Saya Tidak Membungkus pada Berbilang Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!