Bagaimanakah Saya Boleh Kawal Jarak Antara Item Flexbox Dengan Mudah?

Menguruskan Jarak Item Flexbox

Soalan:

Dalam susun atur flexbox, bagaimana saya boleh melaraskan jarak antara item tanpa menggunakan yang rumit margin?

**Jawapan:

Sifat Jurang CSS:

Untuk penyemak imbas lanjutan, sifat jurang boleh digunakan untuk menetapkan jarak secara menegak dan secara mendatar dalam kotak lentur, grid dan berbilang lajur reka letak.

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

Sifat Jurang Baris CSS:

Untuk jarak menegak khususnya dalam susun atur kotak flex dan grid, sifat row-gap adalah pilihan.

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

Jurang Lajur CSS Harta:

Dalam susun atur berbilang lajur, kotak flex dan grid, sifat jurang lajur mengawal jarak mendatar.

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

Contoh:

Coretan berikut menunjukkan penggunaan sifat jurang untuk mencipta jarak antara flexbox item:

<div>

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

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Kawal Jarak Antara Item Flexbox Dengan Mudah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!