Bolehkah Flexbox Mengisi Baki Ruang Menegak Seperti Ruang Mendatar?

Melaksanakan Pengisian Ruang Flexbox Menegak

Masalah:

Dalam baris flexbox, adalah mungkin untuk menetapkan elemen khusus untuk mengisi ruang mendatar yang tersedia menggunakan sifat flex. Walau bagaimanapun, mencapai tingkah laku yang sama secara menegak telah terbukti mencabar, kerana elemen yang ditetapkan untuk mengisi ruang tidak mempunyai ketinggian.

Soalan:

Adakah terdapat cara untuk menggunakan flexbox untuk mempunyai elemen kandungan mengisi ruang menegak yang tinggal dalam lajur flexbox, sama seperti cara ia boleh dilakukan dalam flexbox baris?

Jawapan:

Ya, dengan menggunakan dua pengubahsuaian berikut:

1. Tetapkan arah lentur: lajur untuk bekas lentur .
2. Tetapkan flex: 1 kepada elemen yang sepatutnya menduduki baki menegak ruang.

Dengan menggunakan teknik ini, anda boleh memastikan elemen yang ditentukan memanjang ke bahagian bawah bekas fleksibel, dengan berkesan mengisi ruang menegak yang tersedia.

Contoh:

Pertimbangkan coretan kod berikut, yang menunjukkan cara pendekatan ini boleh dilaksanakan dalam amalan:

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <div>another content</div>
</div>

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

Dengan menetapkan arah lentur: lajur untuk bekas induk dan lentur: 1 untuk elemen yang diingini, kami mencipta reka letak kotak lentur yang memenuhi ruang menegak seperti yang dimaksudkan dengan berkesan.

Pendekatan ini menghapuskan keperluan untuk kedudukan mutlak, menyediakan penyelesaian yang lebih elegan dan fleksibel untuk mengisi ruang menegak dalam flexbox reka letak.

Atas ialah kandungan terperinci Bolehkah Flexbox Mengisi Baki Ruang Menegak Seperti Ruang Mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!