Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana Memaksa Senarai Flexbox untuk Dibungkus pada Kedudukan Tertentu?

Bagaimana Memaksa Senarai Flexbox untuk Dibungkus pada Kedudukan Tertentu?

Barbara Streisand
Barbara Streisandasal
2024-10-31 03:15:31195semak imbas

How to Force Flexbox Lists to Wrap at Specific Positions?

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!

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