Bagaimana untuk Mengawal Pembungkusan Elemen dalam CSS Flexbox?

Kawalan Pembungkusan Elemen Fleksibel dalam CSS Flexbox

Keperluan untuk menentukan elemen selepas elemen CSS flexbox perlu dibalut tidak ditangani secara langsung dalam standard flexbox. Walau bagaimanapun, teknik bijak boleh digunakan untuk mencapai kesan ini.

Untuk membalut paksa selepas elemen tertentu, ikut langkah berikut:

1. Tetapkan paparan: flex; dan flex-wrap: bungkus; pada elemen bekas.
2. Pada elemen yang anda ingin bungkus selepas itu, tetapkan asas-flex: 100%;.

Penyelesaian ini berkesan menetapkan lebar minimum untuk elemen, menyebabkan untuk menukar kepada barisnya sendiri apabila perlu.

Sebagai contoh, pertimbangkan penanda berikut:

<code class="html"><ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul></code>

Dan CSS berikut:

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

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

Ini akan menyebabkan item untuk dibalut selepas elemen keempat, mencipta dua baris:

1 2
3 4

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