Bagaimanakah Saya Boleh Membuat Isian Elemen Kanak-kanak Flexbox Tersedia Ruang Menegak?

Flexbox: Mengisi Ruang Menegak Dengan Berkesan

Dalam baris Flexbox, adalah mungkin untuk menggunakan sifat flex untuk mengagihkan ruang mendatar yang tersedia di kalangan kanak-kanak elemen. Walau bagaimanapun, memanjangkan konsep ini secara menegak memberikan cabaran.

Isu: Mengisi Ruang Menegak

Dalam susun atur Flexbox menegak, dilema biasa ialah elemen kanak-kanak yang memerlukan untuk mengisi ruang yang tinggal tidak mempunyai ketinggian yang ditentukan, menyebabkan unsur-unsur muncul di bawah lain.

Penyelesaian: Menjajarkan Kandungan Secara Menegak dengan Flexbox

Untuk menangani perkara ini, cuba pendekatan berikut:

1. flex- arah: lajur: Tetapkan sifat ini untuk Flexbox induk bekas.
2. flex: 1: Berikan nilai ini kepada elemen anak yang sepatutnya mengisi ruang menegak.

Contoh:

Pertimbangkan susun atur Flexbox berikut:

<div>

Dan yang berkaitan CSS:

.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}

Reka letak ini akan memastikan elemen ".flex" menduduki ruang menegak yang tinggal dalam bekas ".row" induk, yang mempunyai ketinggian tetap 100vh (tinggi viewport).

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Isian Elemen Kanak-kanak Flexbox Tersedia Ruang Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!