Bagaimana Menghilangkan Jurang Antara Lajur dalam Susun Atur Flexbox Apabila Membungkus?

Alih Keluar Ruang (Jurang) Antara Pelbagai Baris Item Flex Apabila Ia Membungkus

Isu: Jurang Antara Lajur

Apabila menggunakan flexbox untuk mencipta bekas dengan berbilang lajur item, anda mungkin menghadapi isu di mana terdapat jurang antara lajur. Ini berlaku kerana tetapan awal bekas flex ialah align-content: stretch, yang mengagihkan berbilang baris item flex secara sama rata di sepanjang paksi silang.

Untuk menghapuskan jurang ini, laraskan sifat align-content kepada flex- mulakan.

Memahami align-content

Apabila bekerja dengan bekas flex satu baris (iaitu, flex-wrap: nowrap), sifat yang akan digunakan untuk mengagihkan ruang di sepanjang paksi silang ialah align-item dan align-self. Walau bagaimanapun, dalam bekas lentur berbilang baris (iaitu, balut lentur: bungkus), seperti dalam soalan, sifat kandungan sejajar mesti digunakan untuk mengagihkan garis lentur (baris / lajur) di sepanjang paksi silang.

Menetapkan align-content: flex-start

Dengan menggunakan align-content: flex-start kepada flex bekas, garisan lentur akan diselaraskan dengan permulaan paksi silang, menghapuskan jurang yang tidak diingini antara lajur.

Atas ialah kandungan terperinci Bagaimana Menghilangkan Jurang Antara Lajur dalam Susun Atur Flexbox Apabila Membungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!