Bagaimana untuk Menjadikan Kanak-kanak Flexbox Menduduki Ketinggian Penuh Ibu Bapa?

Kanak-kanak Flexbox untuk Menduduki Ketinggian Ibu Bapa Penuh

Dalam susun atur Flexbox, secara lalai, elemen kanak-kanak tidak mengisi keseluruhan ketinggian ibu bapa mereka bekas. Ini boleh menjadi masalah apabila cuba membuat susunan menegak yang konsisten.

Masalah: Pertimbangkan contoh berikut di mana .flex-2-child dalam .flex-2 bertujuan untuk mengisi ketinggian ibu bapanya:

.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;
}

Walau bagaimanapun, flex-2-child tidak sepenuhnya menduduki ketinggian sebagai dijangka.

Penyelesaian 1: align-item: stretch:

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

Penyelesaian ini mengubah suai penjajaran item flex, membenarkan flex-2-child meregang dan mengisi ketinggian yang tersedia.

Penyelesaian 2: align-self:

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

Penyelesaian alternatif ini menggunakan penjajaran terus pada elemen anak, memastikan ia memenuhi ketinggian item flex induknya.

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