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!