Bagaimana Memaksa Dua Baris Empat Elemen Setiap Satu Menggunakan Flexbox Apabila Mengubah Saiz Lapan Elemen Secara Dinamik?

Susun atur Flexbox: 4 elemen setiap baris

Apabila menggunakan Flexbox untuk mengubah saiz 8 elemen pada halaman secara dinamik, cara memaksanya dibahagikan ke untuk dua baris (4 setiap baris)?

Memandangkan coretan kod berikut:

<div class="parent-wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

Penyelesaian:

Masalahnya ialah dengan flex-wrap: wrap on the flex bekas , yang membenarkan elemen membalut. Walau bagaimanapun, flex-grow: 1 membenarkan pertumbuhan tanpa had pada unsur, menyebabkan unsur tersebut gagal untuk membalut apabila ia kehabisan ruang.

Penyelesaian adalah untuk menentukan lebar untuk elemen, memaksanya untuk membalut:

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

.child {
  flex: 1 0 21%; /* 展开说明如下 */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

Nilai pertama sifat flex (1 dalam contoh kami) mengagihkan ruang secara sama rata kepada semua elemen, nilai kedua (iaitu 0) menetapkan lebar minimum kepada 0, dan nilai ketiga (iaitu 21%) mentakrifkan lebar maksimum elemen kepada 21% daripada lebar yang tersedia. Dengan menetapkannya seperti ini, elemen akan membalut sebelum mencapai lebar maksimum, mencipta susun atur 4 elemen setiap baris.

Atas ialah kandungan terperinci Bagaimana Memaksa Dua Baris Empat Elemen Setiap Satu Menggunakan Flexbox Apabila Mengubah Saiz Lapan Elemen Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!