Bagaimanakah Saya Boleh Jadikan Ruang Menegak Terdapat Isian Elemen Flexbox?

Flexbox: Isi Ruang Menegak Tersedia

Dalam baris flexbox mendatar, menggunakan sifat "flex" pada elemen membolehkannya berkembang dan mengisi ruang mendatar yang ada. Bagaimana jika anda ingin mencapai kesan yang serupa secara menegak?

Cabarannya terletak pada memastikan elemen menegak mengembang untuk memenuhi ruang yang tinggal, membenarkan elemen lain disusun secara menegak. Untuk menangani perkara ini, anda boleh menggunakan sifat flexbox berikut:

• flex-direction: column pada bekas fleksibel menjajarkan elemen secara menegak dan bukannya mendatar.
• flex: 1 pada elemen yang sepatutnya memenuhi ruang yang tinggal membolehkan ia berkembang dan menduduki baki ketinggian.

Pertimbangkan contoh berikut:

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

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

Dalam persediaan ini, bekas .row mempunyai ketinggian tetap port pandangan penyemak imbas menggunakan ketinggian: 100vh. Elemen .flex mempunyai flex: 1, menyebabkan ia mengembang dan memenuhi ruang menegak yang tinggal. Akibatnya, dua elemen lain disusun secara menegak dalam bekas .row.

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