Bagaimana untuk Mencipta Grid Flexbox Dua Baris dengan Empat Item Setiap Baris?

Flexbox: Mencipta Grid Dua Baris dengan Empat Item Setiap Baris

Flexbox menyediakan sistem susun atur yang berkuasa untuk mencipta halaman web yang dinamik dan responsif . Satu kes penggunaan biasa ialah mencipta reka letak seperti grid yang membungkus dan mengubah saiz itemnya secara automatik apabila saiz port pandang berubah.

Masalahnya: Membungkus Item Ke Dalam Berbilang Baris

Dalam senario khusus anda, anda menghadapi isu di mana bekas flexbox anda memaparkan lapan item dalam satu baris dan bukannya membahagikannya kepada dua baris empat item setiap satu.

Penyelesaian: Memahami Sifat Flexbox

Untuk memaksa item menjadi dua baris, kita perlu melaraskan dua sifat flexbox: flex-wrap dan flex-grow.

flex-wrap: bungkus

Sifat flex-wrap mengawal sama ada item dalam bekas boleh membalut untuk membentuk berbilang baris. Dengan menetapkannya untuk membalut, anda membenarkan item mengalir ke baris baharu mengikut keperluan.

flex-grow: 1

Properti flex-grow mengawal cara item mengagihkan lebihan ruang dalam bekas. Nilai 1 bermakna setiap item akan berkembang secara berkadar untuk mengisi ruang yang tersedia pada barisnya.

Isu: Mengatasi Nilai Lalai

Dalam kod asal anda, flex -wrap ditetapkan untuk membalut, tetapi flex-grow ditetapkan kepada 1 pada item flex. Ini menyebabkan item berkembang untuk menduduki keseluruhan lebar yang tersedia, menghalangnya daripada membungkus.

Pembetulan: Menentukan Lebar Item

Untuk menyelesaikan masalah, kita perlu tentukan lebar khusus untuk item supaya tidak terlalu membesar dan membalut paksa. Dalam kod yang diperbetulkan, kami telah menggunakan sifat flex dengan tiga nilai:

1. flex: 1 0 21%; - Nilai pertama (1) menetapkan faktor pertumbuhan item kepada 1, yang sama dengan flex-grow: 1.
2. flex: 1 0 21%; - Nilai kedua (0) menetapkan faktor pengecutan item kepada 0, yang bermaksud ia tidak akan mengecut di bawah lebar yang ditentukan.
3. flex: 1 0 21%; - Nilai ketiga (21%) menetapkan lebar awal item kepada 21% daripada lebar bekas.

Dengan menentukan lebar item, kami memastikan ia membalut dengan sewajarnya kepada dua baris empat item setiap satu.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Grid Flexbox Dua Baris dengan Empat Item Setiap Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!