Mengapa Barangan Flexbox Saya Tidak Dibalut Dengan Betul?

Menyelesaikan Masalah Pembalut Item Flex

Apabila mencipta berbilang baris elemen sama ketinggian menggunakan flexbox, adalah perkara biasa untuk menghadapi masalah dengan item yang tidak dibalut dengan betul . Ini berlaku kerana gelagat lalai bekas flex adalah untuk menghalang pembalut (flex-wrap: nowrap).

Untuk mendayakan pembalut, tetapkan flex-wrap untuk membalut:

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

Memahami Bekas Flex Sifat:

• paparan: flex: Memulakan elemen sebagai bekas fleksibel, menjajarkan item dalam satu baris atau lajur.
• flex-wrap: wrap: Membolehkan item dibalut dalam bekas.
• flex-wrap: nowrap: Menghalang item daripada membalut, mengehadkannya kepada satu baris.

Contoh:

Pertimbangkan contoh berikut untuk mencipta tiga baris tiga sama tinggi segi empat sama:

#list-wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

#list-wrapper div {}

#list-wrapper div img {
  height: 150px;
  width: 150px;
}

<div>

Atas ialah kandungan terperinci Mengapa Barangan Flexbox Saya Tidak Dibalut Dengan Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!