Bagaimana untuk Mengeluarkan Margin yang Tidak Diperlukan daripada Item Flex Apabila Mereka Membungkus?

Mengalih keluar Margin daripada Item Flex Apabila Ia Membungkus

Flexbox ialah sistem susun atur berkuasa yang membolehkan penciptaan reka letak yang kompleks dengan mudah. Satu isu biasa yang boleh timbul apabila menggunakan flexbox ialah penambahan margin yang tidak perlu antara item flex apabila ia membalut. Secara lalai, flexbox menambah jidar pada item terakhir dalam setiap baris, yang boleh mencipta jarak yang mungkin tidak diingini.

Soalan:

Dalam HTML dan CSS coretan disediakan, penggayaan termasuk kelas .tag dengan jidar 0 5px 5px, yang menyebabkan jidar ditambahkan pada item terakhir pada setiap barisan. Walau bagaimanapun, memandangkan senarai teg adalah dinamik, anda tidak boleh menyasarkan item terakhir tertentu secara langsung (cth., ".item-13") untuk mengalih keluar jidar ini.

Jawapan:

Terdapat beberapa kaedah untuk mengalih keluar jidar yang tidak diperlukan daripada item flex apabila ia membalut:

1. Menggunakan Harta jurang:

Sifat jurang dalam CSS mewujudkan jurang antara item fleksibel, kedua-dua secara mendatar (antara baris) dan menegak (antara lajur). Dengan menetapkan sifat jurang untuk .tags, anda boleh mengalih keluar jidar daripada semua item fleksibel, termasuk yang terakhir dalam setiap baris.

CSS yang dikemas kini:

.tags {
    gap: 5px;
}

2. Menggunakan Harta justify-content Flexbox:

Penyelesaian lain ialah menggunakan sifat justify-content untuk mengawal penjajaran item flex dalam bekas. Dengan menetapkan justify-content: space-between, anda boleh mengagihkan item secara sama rata dalam bekas, menghapuskan margin daripada item terakhir.

CSS yang dikemas kini:

.tags {
    justify-content: space-between;
}

Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Margin yang Tidak Diperlukan daripada Item Flex Apabila Mereka Membungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!