Bagaimana Saya Boleh Jadikan Kanak-Kanak Flexbox Menggunakan Ruang Yang Tersedia untuk Ketinggian Berasingan?

Memastikan Kanak-kanak Flexbox Menggunakan Ruang Sedia untuk Ketinggian Berasingan

Soalan:

Dalam susun atur flexbox dengan dua lajur, bagaimana bolehkah elemen pelbagai saiz diagihkan untuk mengisi keseluruhan kawasan yang boleh diakses daripada mempunyai ketinggian yang sama dengan elemen tertinggi?

Konteks:

Menggunakan sifat flex-wrap flexbox , kita boleh membungkus elemen pada berbilang baris. Walau bagaimanapun, secara lalai, semua elemen dalam satu baris cenderung mempunyai ketinggian yang sama dengan elemen tertinggi dalam baris itu. Ini boleh menjadi tidak diingini jika kita mahu unsur mengekalkan ketinggian semula jadinya.

Contoh:

Pertimbangkan kod berikut:

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex: 1 auto;
}

Jawapan:

Flexbox wujud mengikut reka bentuk bahawa baris berkelakuan seperti yang diterangkan di atas. Flexbox tidak berhasrat untuk meniru reka letak gaya Masonry di mana elemen baris boleh meluas ke ruang baris bersebelahan. Terdapat pilihan terhad untuk melaraskan ketinggian elemen menggunakan item penjajaran:

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

Sebagai alternatif, pertimbangkan untuk menggunakan orientasi lajur atau meneroka modul berbilang lajur untuk mendapatkan lebih banyak pilihan penyesuaian.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Jadikan Kanak-Kanak Flexbox Menggunakan Ruang Yang Tersedia untuk Ketinggian Berasingan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!