Bagaimana untuk Mengeluarkan Margin Bawah daripada Item Flex Apabila Ia Membungkus?

Mengalih keluar Margin daripada Item Flex Apabila Ia Membungkus

Apabila bekerja dengan flexbox, selalunya perlu mengalih keluar jidar bawah daripada item terakhir berturut-turut, terutamanya apabila mencipta senarai dinamik yang menyasarkan item tertentu tidak dapat dilaksanakan. Ini boleh mengakibatkan jarak tidak sekata antara item dalam baris yang berbeza.

Dalam konteks ini, flexbox tidak menawarkan ciri yang wujud untuk mengubah suai gaya CSS berdasarkan kedudukan item dalam satu baris. Walau bagaimanapun, terdapat pendekatan alternatif untuk mencapai kesan yang diingini.

Menggunakan Harta jurang

CSS telah memperkenalkan sifat jurang, yang boleh digunakan untuk menambah ruang antara item fleksibel. Apabila ditetapkan kepada nilai yang sesuai, ia boleh mengalih keluar margin dengan berkesan daripada item terakhir dalam setiap baris. Walau bagaimanapun, sifat ini tidak disokong oleh pelayar lama.

.tags {
  gap: 5px;
}

Melaraskan Margin

Pendekatan lain ialah mengubah suai jidar bawah elemen li, tetapi hanya apabila ia adalah item terakhir dalam sebaris. Untuk ini, kami boleh menggunakan JavaScript untuk melaraskan gaya secara dinamik berdasarkan kedudukan elemen dalam bekasnya.

const tags = document.querySelectorAll('.tags li');
tags.forEach((tag, index) => {
  if (index % 4 === 3) {
    tag.style.marginBottom = 0;
  }
});

Menggunakan Elemen Pseudo

Elemen Pseudo juga boleh digunakan untuk memasukkan elemen halimunan sebelum atau selepas item terakhir dalam setiap baris dan gunakan gaya padanya, seperti menetapkan jidar negatif untuk membatalkan jidar daripada li elemen.

.tags li:last-of-type::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-bottom: -5px;
}

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