Bagaimana Saya Boleh Menggunakan Flexbox untuk Memastikan 4 Item Setiap Baris?

Flexbox: Kuatkuasakan 4 Item setiap Baris

Dalam bidang reka bentuk responsif, flexbox menyediakan alat yang berkuasa untuk meletakkan elemen. Walau bagaimanapun, ia tidak selalunya mudah untuk mencapai reka letak tertentu, seperti menguatkuasakan bilangan item yang tetap bagi setiap baris.

Memahami Isu

Seperti yang diterangkan dalam pertanyaan asal, matlamatnya adalah untuk memaparkan 8 item dalam bekas flexbox sambil mengekalkan susunan konsisten 4 item setiap baris. Secara lalai, flexbox akan mengagihkan item secara sama rata di sepanjang ruang yang tersedia, selalunya mengakibatkan baris tidak sekata apabila bilangan item melebihi lebar yang diingini.

Penyelesaian: Mengatasi Flex-Grow

Dalam senario ini, isu ini berpunca daripada sifat flex-grow yang digunakan pada item flex individu. Flex-grow mengarahkan item untuk mengembangkan пропорционально untuk menduduki mana-mana ruang yang ada. Walau bagaimanapun, memandangkan item tidak mempunyai lebar yang ditentukan, ia terus mengecil kepada sifar dan tidak pernah membalut.

Kunci untuk menguatkuasakan bilangan item tertentu bagi setiap baris adalah dengan menentukan lebar pada item fleksibel. Dengan menetapkan lebar tetap, setiap item menempati ruang yang telah ditetapkan, memaksa mereka untuk membalut apabila ruang yang tersedia melebihi.

Pelaksanaan

Kod CSS berikut menunjukkan cara memastikan 8 item dipaparkan dalam 2 baris 4:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

• Fleks: 1 0 21%; - Sifat trengkas flex ini:

  • 1: Mengarahkan item untuk membesar (jika ada ruang yang tersedia) berkadaran dengan ini nilai.
  • 0: Menetapkan lebar minimum item untuk mengelakkannya daripada mengecut.
  • 21: Mentakrifkan lebar item individu sebagai 21% daripada lebar bekas induk. Berdasarkan nilai flex, ini memastikan bahawa 4 item akan dimuatkan pada setiap baris.
• Flex-wrap: wrap; - Membenarkan item dibalut ke baris seterusnya apabila lebar bekas tidak mencukupi.

Kesimpulan

Dengan menetapkan tetapan lebar untuk item fleksibel dan mendayakan pembalut fleksibel, ia menjadi mungkin untuk menguatkuasakan bilangan item tertentu setiap baris dalam susun atur kotak flex. Teknik ini memberikan pereka bentuk kawalan yang lebih besar ke atas responsif dan reka letak elemen web mereka.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menggunakan Flexbox untuk Memastikan 4 Item Setiap Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!