Mengapa Item Flex Saya Tidak Membungkus ke Berbilang Baris?

Item Fleksibel Tidak Dibalut: Menyelesaikan Isu Penjajaran

Masalah:

Percubaan untuk memaparkan berbilang baris elemen segi empat sama (3 setiap baris) dengan ketinggian yang sama, tetapi semuanya muncul pada yang sama baris.

Pertimbangan Awal:

Tetapan lalai untuk bekas flex ialah flex-wrap: nowrap, yang mengehadkan item flex kepada satu baris. Untuk mendayakan pembalut, sifat ini mesti ditetapkan untuk membalut.

Penyelesaian:

1. Tambah flex-wrap: balut pada gaya bekas induk:

   #list-wrapper {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
   }

   Salin selepas log masuk

2. Pastikan bahawa dimensi item fleksibel ditakrifkan (cth., lebar dan tinggi) untuk membolehkan penyemak imbas mengira reka letak yang sesuai:

   #list-wrapper div {
     width: 33.33%;
   }
   
   #list-wrapper div img {
     flex: 1;
   }

   Salin selepas log masuk

Nota Tambahan:

• Item fleksibel disusun mengikut baris secara lalai, bermula dari penjuru kiri sebelah atas. Untuk mengubah tingkah laku ini, pertimbangkan untuk menggunakan arah flex.
• Pelayar mengira saiz dan penjajaran item flex secara automatik, berdasarkan ruang yang tersedia dan sifat flex yang ditentukan.
• Untuk reka letak yang lebih maju , sifat fleksibel tambahan (mis., justify-content, align-content) boleh digunakan untuk memperhalusi kedudukan item flex dalam bekas.

Atas ialah kandungan terperinci Mengapa Item Flex Saya Tidak Membungkus ke Berbilang Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!