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

Susan Sarandon
Lepaskan: 2024-11-08 08:22:01
asal
738 orang telah melayarinya

How to Ensure Flexbox Children Occupy Available Vertical Space?

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;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan