Bagaimana untuk Menghilangkan Jurang Antara Item Flex yang Dibalut dalam Lajur?

Alih Keluar Ruang (Jurang) Antara Pelbagai Garisan Barangan Fleksibel Apabila Ia Membungkus

Apabila menggunakan flexbox dengan ketinggian bekas yang ditetapkan dan arah lajur, adalah mungkin untuk menghadapi jurang antara baris item apabila ia membalut. Isu ini timbul disebabkan oleh sifat align-content lalai yang ditetapkan kepada regangan, yang mengedarkan garisan sama rata dalam ruang yang tersedia.

Untuk mengalih keluar jurang ini, laraskan sifat align-content:

css
.bekas {
align-content: flex-start;
}

Ini menetapkan penjajaran untuk garisan lentur (baris) ke permulaan bekas, dengan berkesan menghapuskan sebarang jurang antara garisan.

Memahami Talian Flex Penjajaran

Adalah penting untuk diperhatikan perbezaan antara item penjajaran dan align-content:

• align-item: Menjajarkan item dalam satu garis lentur (baris atau lajur) pada paksi silang.
• align -kandungan: Menjajarkan berbilang garisan lentur dalam bekas pada salib paksi.

Dalam kes bekas fleksibel berbilang baris, kandungan penjajaran bertanggungjawab untuk mengagihkan ruang antara baris atau lajur. Dengan menetapkan align-content kepada flex-start, garisan lentur diletakkan pada permulaan bekas tanpa sebarang celah.

Petua Tambahan

Pertimbangkan untuk menambah sifat flexbox lain pada memperhalusi susun atur:

• justify-kandungan: Jajarkan item dalam setiap garis lentur pada paksi utama.
• selaraskan-item: Tetapkan menegak penjajaran dalam setiap garis lentur.
• arah lentur: Tentukan reka letak arah (baris atau lajur).
• flex-wrap: Tentukan sama ada item membalut ke berbilang baris.

Atas ialah kandungan terperinci Bagaimana untuk Menghilangkan Jurang Antara Item Flex yang Dibalut dalam Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!