Bagaimana untuk Mengeluarkan Margin Yang Tidak Diingini Dari Baris Terakhir Item Flex Apabila Mereka Membungkus?

Mengalih keluar Margin daripada Item Flex Apabila Ia Membungkus

Apabila bekerja dengan susun atur flexbox, adalah mungkin untuk menghadapi senario di mana baris terakhir item flex dalam bekas mempunyai margin bawah yang tidak diingini disebabkan oleh item terakhir yang mewarisinya daripada kelas CSSnya. Ini menjadi mencabar apabila senarai teg adalah dinamik dan adalah tidak praktikal untuk menyasarkan item tertentu berdasarkan indeksnya (iaitu, Item-13, Item-14, dll.).

Penyelesaian

Flexbox tidak menyediakan cara langsung untuk menghapuskan margin dari baris terakhir item. Walau bagaimanapun, terdapat beberapa pendekatan alternatif:

1. Menggunakan Harta Jurang

Dalam penyemak imbas moden, sifat jurang CSS boleh digunakan untuk mencipta ruang antara item fleksibel. Dengan menetapkan nilai jurang, anda boleh menambah ruang secara automatik antara semua item flex, menghapuskan keperluan untuk margin.

.container {
  ...
  gap: 5px;                          /* added */
}

2. Pemilihan Berasaskan Baris

Jika senarai teg ialah anak bekas lain dengan ketinggian yang diketahui, anda boleh secara selektif mengalih keluar jidar bawah daripada baris terakhir menggunakan pemilih CSS nth-child():

.container .tags li:nth-child(12n) {
  margin-bottom: 0;
}

3. Calculated Width Child

Dalam sesetengah kes, adalah mungkin untuk mengira lebar setiap kanak-kanak dan menambahnya pada bekas fleksibel. Ini akan menyebabkan bekas membalut kanak-kanak secara sekata, menghapuskan keperluan untuk jidar yang jelas.

.container {
  ...
  display: flex;
  flex-wrap: wrap;
  width: 100%;  /* width based on child count and their individual widths */
}

.tag {
  width: 20%;
}

Nota: Sifat gap disokong oleh penyemak imbas moden, termasuk Chrome, Firefox dan Safari. Ia kembali kepada 0 dalam penyemak imbas yang tidak disokong.

Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Margin Yang Tidak Diingini Dari Baris Terakhir Item Flex Apabila Mereka Membungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!