Mengapa Menetapkan Ketinggian Tetap pada Item Fleksibel Tidak Mempengaruhi Saiznya?

Untuk contoh ini, sudah cukup untuk mengendalikan baris ini:

.flex-item {
    ... ;
    height: auto;
}

Ubah suai nilainya dengan:

.flex-item {
    ... ;
    height: 50px;
}

Pengubahsuaian ini akan langsung tidak mengubah apa-apa. Ketinggian masih akan dikira secara automatik.

Untuk membuat semua sel segi empat sama dibaca betul-betul di bawah:

Berikut ialah satu cara yang mungkin untuk menjadikan semua sel segi empat sama menggunakan Flexbox.

1. Untuk mengekang nisbah bidang, sama ada secara manual atau sebagai nilai mutlak, tetapkan dengan peratusan seperti yang telah anda lakukan.
2. Kemudian tetapkan semula ketinggian/lebar berkaitan Flexbox pada sel tersebut kepada auto. Ini memastikan bahawa item tidak mengubah saiz agar sesuai dengan saiz bekas apabila ia berubah.

.flex-item {
  ... ;
  height: auto;
  width: auto;
  min-width: 50px; /* minimum width of 50px; adapt to your needs */ 
}

Atas ialah kandungan terperinci Mengapa Menetapkan Ketinggian Tetap pada Item Fleksibel Tidak Mempengaruhi Saiznya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!