Bagaimana untuk Menghapuskan Margin Bawah yang Tidak Diingini pada Item Flex yang Dibalut?

Cara Mengeluarkan Margin daripada Item Flex selepas Membungkus

Dalam flexbox, anda boleh menghadapi situasi di mana item terakhir dalam baris yang dibalut mengekalkan jidar bawah, menyebabkan jurang yang tidak diingini. Apabila senarai teg yang anda gayakan dengan flexbox dijana secara dinamik, menyasarkan item tertentu seperti "item-13" adalah tidak praktikal.

Nasib baik, Flexbox menawarkan pilihan untuk menangani isu ini tanpa menggunakan penyasaran manual:

Kemas kini (2021): Penyemak imbas moden menyokong sifat jurang untuk Flexbox. Sifat ini menambah jarak antara item fleksibel, secara mendatar dan menegak. Untuk mengalih keluar jidar bawah, cuma tetapkan jurang kepada nilai yang anda inginkan:

.tags {
  gap: 5px;
}

Pelayar Warisan (pra-2021):

Menggunakan nth-child :

Pemilih anak ke-n() membolehkan anda menyasarkan elemen berdasarkan kedudukannya dalam senarai. Walau bagaimanapun, memandangkan kedudukan item terakhir mungkin berbeza-beza, kaedah ini mungkin tidak boleh dipercayai untuk senarai dinamik.

Menggunakan jenis ke-n terakhir:

Lagi pendekatan yang mantap ialah menggunakan :last-of-type selepas pemilih nth-child(). Ini memastikan anda menyasarkan elemen terakhir jenis tertentu dalam bekasnya:

li:nth-child(n+0):last-of-type {
  margin-bottom: 0;
}

Mengubah suai Paparan:

Sebagai alternatif, anda boleh menukar mod paparan elemen senarai dalaman anda daripada flex kepada inline-flex. Pilihan ini mengalih keluar semua jidar dan menambah jarak antara item secara lalai.

.tag {
  display: inline-flex;
  margin: 0 5px 5px; /* Unnecessary now */
}

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Margin Bawah yang Tidak Diingini pada Item Flex yang Dibalut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!