Bagaimana untuk Mengawal Pembungkusan Elemen dalam CSS Flexbox: Bolehkah saya Memaksa Flexbox untuk Membungkus Selepas Elemen Tertentu?

Cara Mengawal Pembungkusan Elemen dalam CSS Flexbox

Soalan:

Adakah ada cara untuk menentukan elemen selepas pembungkusan yang harus berlaku dalam susun atur flexbox? Ini berguna untuk mengawal tindak balas senarai tanpa menambah penanda tambahan.

Jawapan:

Walaupun tiada sifat "flex-break" yang jelas dalam standard flexbox, anda boleh mencapai kesan ini dengan menggabungkan teknik berikut:

1. Tetapkan "flex-wrap: wrap;" pada bekas: Ini membenarkan item untuk membalut ke baris baharu seperti yang diperlukan.
2. Gunakan "flex-basis: 100%;" pada elemen kanak-kanak yang ingin anda pecahkan selepas: Ini memberitahu penyemak imbas untuk menetapkan lebar minimum elemen tersebut kepada 100%, dengan berkesan memaksanya untuk bermula pada baris baharu.

Contoh:

<code class="css">ul {
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(2n) {
  flex-basis: 100%;
}</code>

Dalam contoh ini, item dalam senarai akan dibalut ke baris baharu selepas setiap elemen lain (bergantung pada ruang yang tersedia). Dengan melaraskan nilai "nth-child()", anda boleh mengawal elemen yang menyebabkan pembalut.

Untuk demonstrasi yang lebih lengkap, lihat JSFiddle yang disediakan: http://jsfiddle.net/theazureshadow/ww8DR /

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Pembungkusan Elemen dalam CSS Flexbox: Bolehkah saya Memaksa Flexbox untuk Membungkus Selepas Elemen Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!