Bagaimana Membuat Kanak-kanak Flexbox Menduduki Ruang Sepenuhnya Sambil Mengekalkan Ketinggian Asal Mereka?

Flexbox: Mencapai Kanak-kanak Ketinggian Boleh Ubah untuk Menggunakan Sepenuhnya Ruang Tersedia

Flexbox ialah modul susun atur berkuasa yang membolehkan pembangun web mencipta responsif dan susun atur yang fleksibel. Satu kes penggunaan biasa ialah mencipta reka letak dua lajur di mana setiap lajur mengandungi elemen kanak-kanak yang berbeza-beza ketinggian. Walau bagaimanapun, secara lalai, semua kanak-kanak dalam satu baris akan mempunyai ketinggian kanak-kanak yang paling tinggi.

Masalah:

Bagaimana anda boleh mengkonfigurasi susun atur Flexbox dua lajur untuk membenarkan kanak-kanak dengan saiz yang berbeza-beza untuk menggunakan sepenuhnya ruang yang ada dan bukannya semua kanak-kanak mempunyai ketinggian kanak-kanak yang paling tinggi dalam baris?

Penyelesaian:

Flexbox tidak secara asalnya membenarkan baris menduduki ruang yang diperuntukkan untuk baris sebelumnya atau berikutnya. Oleh itu, CSS sahaja tidak boleh mencipta semula tingkah laku seperti Masonry di mana item dalam satu baris boleh diregangkan untuk mengisi ruang yang tersedia.

Pelaksanaan:

Menggunakan sifat align-item ditetapkan kepada flex-start boleh menghalang kanak-kanak daripada regangan, memastikan mereka mengekalkan ketinggian asal mereka:

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

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

Penyelesaian ini memastikan setiap sel mengekalkan ketinggian asalnya, menghalang kanak-kanak paling tinggi daripada mengenakan ketinggiannya pada keseluruhan baris.

Pendekatan Alternatif:

Sebagai alternatif, pertimbangkan untuk menggunakan orientasi lajur atau modul berbilang lajur untuk membuat reka letak dengan lajur ketinggian berubah-ubah. Pendekatan ini membolehkan item dalam lajur menduduki ketinggian penuh lajur itu, mencapai kesan yang diingini.

Atas ialah kandungan terperinci Bagaimana Membuat Kanak-kanak Flexbox Menduduki Ruang Sepenuhnya Sambil Mengekalkan Ketinggian Asal Mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!