Bagaimanakah Saya Boleh Membuat Elemen Mengisi Ruang Tersedia Secara Menegak dalam Kotak Flex?

Flexbox: Mengisi Ruang Tersedia Secara Menegak

Dalam baris flexbox, menggunakan flex pada elemen membolehkannya berkembang dan memenuhi baki ruang yang tersedia. Sekarang, persoalan timbul: bolehkah kita meniru tingkah laku ini secara menegak?

Dalam senario yang diterangkan, anda mempunyai baris flexbox di mana anda mahu satu elemen menjangkau ketinggian bekas induk secara menegak, walaupun jika bekas itu mempunyai ketinggian tetap. Semasa meletakkan elemen secara mutlak dengan bahagian bawah: 0; ialah penyelesaian yang berdaya maju, hasil yang diingini dicari menggunakan flexbox.

Untuk mencapai ini:

1. Tetapkan arah-flex: lajur untuk bekas fleksibel.
2. Tetapkan lentur: 1 kepada elemen yang sepatutnya menduduki ruang yang tinggal.

Berikut ialah demo:

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

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

Dalam contoh ini, elemen flexbox, dengan flex: 1, mengisi keseluruhan ruang menegak bekas induk, seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen Mengisi Ruang Tersedia Secara Menegak dalam Kotak Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!