Bagaimana untuk Meruang Item Flexbox Dengan Betul Menggunakan CSS?

Cara Melaraskan Jarak Antara Item Flexbox dengan CSS

Menetapkan jarak minimum antara item flexbox menggunakan margin: 0 5px dan margin: 0 - 5px mungkin kelihatan seperti penyelesaian. Walau bagaimanapun, terdapat sifat CSS khusus yang direka untuk tujuan ini:

Harta jurang CSS:

Dalam penyemak imbas moden, sifat jurang tersedia untuk berbilang lajur, flexbox, dan susun atur grid. Ia menetapkan ruang antara kedua-dua baris dan lajur:

#box {
  display: flex;
  gap: 10px;
}

Sifat row-gap CSS:

Untuk susun atur kotak flex dan grid, row-gap mentakrifkan ruang antara baris:

#box {
   display: flex;
   row-gap: 10px;
}

jurang lajur CSS Harta:

Dalam reka letak berbilang lajur, kotak flex dan grid, jurang lajur menentukan ruang antara lajur:

#box {
  display: flex;
  column-gap: 10px;
}

Contoh:

Untuk menggambarkan penggunaan, pertimbangkan perkara berikut kod:

#box {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  background-color: red;
  gap: 10px;
}

.item {
  background: gray;
  width: 50px;
  height: 50px;
  border: 1px black solid;
}

<div>

Kod ini mencipta kotak fleksibel dengan empat item kelabu, dijarakkan sama rata dengan jurang 10 piksel.

Atas ialah kandungan terperinci Bagaimana untuk Meruang Item Flexbox Dengan Betul Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!