Bagaimana untuk Memastikan Kanak-kanak Flexbox Menduduki Ruang Menegak Tersedia?

Memastikan Kanak-kanak Flexbox Menduduki Ruang Menegak Tersedia

Apabila menggunakan susun atur flexbox dengan berbilang lajur, adalah wajar untuk kanak-kanak menduduki tempat yang berbeza-beza ketinggian untuk menggunakan sepenuhnya ruang yang tersedia, dan bukannya terhad kepada ketinggian baris tertinggi kanak-kanak.

Menangani Isu

Barisan Flexbox secara semula jadi berkelakuan dengan menjajarkan item secara menegak dalam ruang yang ditetapkan. Walau bagaimanapun, untuk mengelakkan item daripada meregang ke ketinggian penuh baris, sifat item jajar boleh digunakan untuk mengawal penjajaran menegak.

Penyelesaian

Untuk mencapai tingkah laku yang diingini, tetapkan sifat align-item kepada flex-start:

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

Ini akan membolehkan kanak-kanak mengekalkan ketinggian intrinsik, sambil mengekalkan penjajaran menegak baris.

Pilihan Tambahan

Jika reka letak yang dikehendaki memerlukan gelagat jarak yang lebih kompleks, pertimbangkan untuk menggunakan orientasi lajur atau berbilang -modul lajur untuk mencapai hasil yang diinginkan. Untuk maklumat lanjut, rujuk jawapan SO komprehensif di https://stackoverflow.com/a/20862961/1652962.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Kanak-kanak Flexbox Menduduki Ruang Menegak Tersedia?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!