Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengawal Pembungkusan Elemen dalam CSS Flexbox?

Bagaimana untuk Mengawal Pembungkusan Elemen dalam CSS Flexbox?

Susan Sarandon
Susan Sarandonasal
2024-10-30 09:22:03235semak imbas

How to Control Element Wrapping in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn