Bagaimanakah Saya Boleh Mengagihkan Ruang Secara Menegak Menggunakan Flexbox?

Pengagihan Ruang Flexbox Menegak

Apabila berurusan dengan susun atur flexbox dalam baris, adalah mudah untuk mengisi ruang yang ada. Anda boleh menggunakan flex: 1 pada elemen untuk menunjukkan bahawa ia harus menggunakan sebarang ruang yang tinggal. Walau bagaimanapun, mencapai ini secara menegak boleh menjadi sedikit rumit.

Kotak Flex Menegak

Untuk mencapai pengagihan ruang menegak, pertimbangkan langkah berikut:

1. Tetapkan lenturan bekas induk- arah ke lajur.
2. Untuk memastikan elemen mengisi ruang yang tinggal, tetapkan ia fleksibel: 1.

Contoh

Berikut ialah demonstrasi kod:

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 contoh ini, kelas flex pada elemen tengah menunjukkan bahawa ia sepatutnya menduduki ruang yang tinggal dalam lajur menegak, menolak elemen lain ke atas dan bawah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengagihkan Ruang Secara Menegak Menggunakan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!