Bagaimana untuk Menghilangkan Jurang Antara Barangan Flex Apabila Ia Membungkus?

Alih Keluar Ruang Antara Item Fleksibel Apabila Ia Membungkus

Anda cuba mencapai susun atur lentur berbilang baris di mana item mengalir secara mendatar apabila ruang tidak mencukupi secara menegak . Walau bagaimanapun, anda menghadapi jurang antara lajur.

Tetapan awal untuk bekas flex ialah align-content: stretch. Ini mengedarkan item lentur secara sama rata merentasi paksi silang bekas berbilang baris. Untuk mengelakkan tingkah laku ini, gunakan align-content: flex-start pada bekas.

Apabila bekerja dengan bekas flex satu baris, anda menggunakan item align-item dan align-self untuk mengagihkan ruang di sepanjang paksi silang. Walau bagaimanapun, dalam bekas berbilang baris, seperti dalam kes anda, anda menggunakan sifat align-content untuk mengedarkan garis lentur (baris atau lajur) di sepanjang paksi silang.

Sifat align-content menerima pelbagai nilai, termasuk:

• flex-start
• flex-end
• center
• ruang-antara
• space-round
• regangkan

Secara lalai, nilainya ialah regangan, yang bermaksud ruang kosong yang tinggal dipisahkan sama rata antara semua baris, menyebabkannya berkembang.

Penyelesaian

Untuk menghapuskan jurang antara lajur dalam contoh kod anda, ubah suai CSS :

.container {
  align-content: flex-start;
}

Kesimpulan

Menggunakan align-content: flex-start memastikan garisan flex bermula dari bahagian atas bekas dan terus ke bawah tanpa sebarang jurang tambahan. Ini sejajar dengan reka letak yang anda cari.

Atas ialah kandungan terperinci Bagaimana untuk Menghilangkan Jurang Antara Barangan Flex Apabila Ia Membungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!