Bagaimana Memaksa Senarai Flexbox untuk Dibungkus pada Kedudukan Tertentu?

Cara Memecahkan Senarai Flexbox dalam Kedudukan Tertentu

Anda menghadapi situasi di mana anda ingin memecahkan senarai flexbox pada kedudukan tertentu selepas elemen tertentu, meningkatkan tindak balas reka letak anda. Walaupun standard flexbox tidak menyokong perkara ini secara eksplisit, terdapat helah yang boleh anda gunakan.

Sihir CSS

Untuk membalut paksa selepas elemen tertentu, tambahkan CSS berikut ke bekas:

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

Seterusnya, tambahkan CSS ini pada elemen yang selepas itu anda mahu bungkus berlaku:

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

Di mana "4n" mewakili kedudukan elemen dalam senarai (cth., 4n bermaksud elemen keempat, elemen kelapan, dsb.).

Contoh Kod

Sebagai contoh, pertimbangkan penanda HTML berikut:

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

Dan CSS yang disertakan:

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

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

Persediaan ini akan memaksa senarai untuk dibalut selepas setiap elemen kedua, menghasilkan reka letak responsif yang menyesuaikan diri dengan saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana Memaksa Senarai Flexbox untuk Dibungkus pada Kedudukan Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!