Bagaimana untuk Membuat Elemen Anak Flexbox Mengisi 100% Ketinggian Ibu Bapanya?

Ketinggian Anak Flexbox: Mencapai 100% Pengisian Ibu Bapa

Dalam dunia Flexbox, mengisi ruang menegak elemen kanak-kanak menimbulkan cabaran yang sama . Mari kita pertimbangkan coretan kod yang anda berikan:

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

Dalam senario ini, elemen flex-2-child gagal untuk menduduki ruang menegak penuh bekas induknya, kecuali apabila flex-2 mempunyai ketinggian 100 % atau apabila flex-2-child mempunyai kedudukan mutlak. Walau bagaimanapun, kedua-dua penyelesaian datang dengan kelemahan mereka sendiri.

Penyelesaian: Jajar-Item Regangan

Satu penyelesaian yang berkesan melibatkan penggunaan sifat align-item pada bekas induk ( flex-2):

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

Perhatikan bahawa ketinggian: 100%; harta harus dialih keluar daripada komponen anak (flex-2-child).

Pendekatan ini mengarahkan elemen flex-2-child untuk meregang secara menegak, mengisi ruang yang tersedia dalam bekas induknya. Ia berfungsi dalam kedua-dua Chrome dan Firefox.

Sebagai alternatif kepada align-item, anda boleh menggunakan align-self secara khusus pada elemen flex-2-child yang anda mahu regangan:

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

Dengan menggunakan salah satu teknik, anda boleh mencapai gelagat yang diingini iaitu mempunyai anak-anak Flexbox memenuhi ketinggian penuh elemen ibu bapa mereka.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Elemen Anak Flexbox Mengisi 100% Ketinggian Ibu Bapanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!