Bagaimana untuk Menjadikan Kanak-kanak Flexbox Menduduki Ketinggian Penuh Bekas Induk Mereka?

Cara Menjadikan Kanak-kanak Flexbox Sama Tinggi dengan Ibu Bapa Mereka

Apabila bekerja dengan Flexbox, anda mungkin menghadapi cabaran membuat elemen kanak-kanak memenuhi seluruh ruang menegak bekas induk mereka . Ini boleh mengecewakan terutamanya jika anda mahu elemen kanak-kanak 100% daripada ketinggian ibu bapa.

Flexbox Parent Container Setup

Berikut ialah versi ringkas anda HTML dan CSS kod:

HTML:

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

CSS:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

Penyelesaian: align-item: stretch

Untuk menyelesaikan isu ini tanpa menggunakan kedudukan mutlak atau menetapkan ketinggian elemen flex-2 kepada 100%, anda boleh menggunakan item penjajaran: sifat regangan pada bekas induk flex-2.

.flex-2 {
  display: flex;
  align-items: stretch;
}

Nota tentang Sifat Ketinggian

Ia adalah penting untuk mengalih keluar ketinggian: 100% sifat daripada elemen flex-2-child. Ini akan memastikan elemen anak meregang secara menegak dalam bekas induk.

Alternatif: align-self

Pilihan lain ialah menggunakan align-self: stretch on elemen kanak-kanak tertentu yang anda mahu isi ketinggian.

.flex-2-child {
  align-self: stretch;
}

Kaedah ini memberi anda lebih kawalan ke atas setiap kanak-kanak elemen.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Kanak-kanak Flexbox Menduduki Ketinggian Penuh Bekas Induk Mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!