Bagaimana untuk Menghilangkan Jurang Antara Lajur Flexbox Selepas Membungkus?

Alih Keluar Ruang Antara Lajur Item Flex Selepas Balutan

Apabila menggunakan flexbox untuk mencipta lajur item dalam bekas dengan ketinggian yang ditetapkan, anda boleh menghadapi jurang yang tidak diingini antara lajur apabila ia membalut pada baris baharu. Isu ini berlaku disebabkan oleh tetapan lalai align-content: stretch.

Align-content menentukan taburan berbilang baris item flex sepanjang paksi silang. Apabila ditetapkan untuk meregangkan, garisan lentur teragih sama rata di sepanjang ruang yang ada. Untuk mengatasi gelagat ini dan mengalih keluar jurang, anda boleh menggunakan align-content: flex-start pada bekas.

Berbeza dengan bekas flex satu baris, bekas flex berbilang baris (flex-wrap: wrap) gunakan sifat align-content untuk mengedarkan garis lentur. Menurut spesifikasi flexbox, align-content mempunyai enam nilai berikut:

• flex-start
• flex-end
• center
• space -antara
• ruang-sekitar
• regangan (lalai)

Regangan membolehkan garisan lentur mengembang dan mengisi mana-mana ruang yang tinggal. Jika terdapat ruang kosong negatif, regangan berkelakuan seperti flex-start, manakala dalam semua kes lain, ia membahagikan ruang sama rata antara garisan.

Dengan menetapkan align-content: flex-start, anda menjajarkan garisan flex ke permulaan paksi silang, dengan berkesan mengalih keluar sebarang jurang antara lajur. Ini memberi anda hasil yang diingini bagi item yang dibarisi kemas di bawah satu sama lain, memenuhi ruang yang ada.

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