Mengapa Peratusan Ketinggian Tidak Berfungsi Seperti Yang Dijangkakan dalam Lajur Flexbox?

Isu Ketinggian Peratusan dalam Lajur Flexbox

Dalam susun atur flexbox, selalunya dikehendaki untuk mempunyai anak lajur flexbox mengisi ketinggian mereka. Walau bagaimanapun, pengguna mungkin menghadapi masalah apabila menetapkan ketinggian kepada peratusan tidak menghasilkan hasil yang diharapkan.

Penjelasan

Menurut spesifikasi flexbox, sifat saiz silang elemen (ketinggian, dalam kes ini) menggunakan nilai yang ditentukan dan nilai yang digunakan. Peratusan ketinggian dikira berdasarkan ketinggian induk yang ditentukan, bukan ketinggian yang digunakan.

Penyelesaian

Untuk menangani isu ini dalam Chrome:

1. Tetapkan bekas induk (.flex) untuk dipaparkan: flex.
2. Alih keluar ketinggian: 100%; peraturan daripada elemen anak (.flex-child).

Contoh:

.flexbox {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
  display: flex; /* Added */
}

.flex-child {
  background: red;
  width: 100%; /* Removed height: 100%; */
  display: block;
}

Pendekatan Alternatif untuk Pengisian Separa

Dalam kes di mana mengisi hanya sebahagian daripada bekas induk dikehendaki, anak flex tambahan (.spacer) boleh ditambah untuk mengambil ruang yang tinggal.

.flex-child {
  flex: 9;
}

.spacer {
  flex: 1;
}

Kesimpulan

Dengan memahami perbezaan antara nilai yang ditentukan dan terpakai, pembangun boleh mengatasi isu ketinggian peratusan dalam lajur flexbox . Walaupun penyelesaian khusus penyemak imbas mungkin diperlukan dalam beberapa kes, pengemaskinian spesifikasi dijangka akan menangani pengehadan ini pada masa hadapan.

Atas ialah kandungan terperinci Mengapa Peratusan Ketinggian Tidak Berfungsi Seperti Yang Dijangkakan dalam Lajur Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!