Bagaimanakah Saya Boleh Menambah Jarak Antara Item Flexbox Dengan Mudah Menggunakan CSS?

Mencipta Ruang Antara Item Flexbox: Panduan Komprehensif dengan CSS Gap Property

Dalam reka bentuk web, mewujudkan jarak antara item flexbox boleh meningkatkan kebolehbacaan dan organisasi. Walaupun menggunakan margin dan margin negatif mungkin kelihatan seperti penyelesaian, terdapat sifat CSS yang lebih elegan dan cekap yang direka khusus untuk tujuan ini.

Harta Jurang CSS

CSS gap property ialah alat serba boleh yang memudahkan proses menambah jarak pada susun atur flexbox. Ia disokong oleh semua pelayar utama, menjadikannya pilihan yang boleh dipercayai. Sifat gap ialah singkatan untuk row-gap dan column-gap, membolehkan anda menetapkan kedua-dua jarak mendatar dan menegak.

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

Css row-gap Property

Sifat row-gap mencipta jarak antara baris dalam reka letak flexbox. Ini amat berguna untuk item yang dijajarkan secara menegak.

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

Sifat jurang lajur CSS

Harta jurang lajur, sebaliknya, mewujudkan jarak antara lajur dalam kotak flex susun atur. Ia berkesan untuk item yang dijajarkan secara mendatar.

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

Contoh

Pertimbangkan contoh berikut yang menggabungkan sifat jurang, balut lentur dan lebar untuk mencipta grid item dengan jarak:

#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>

Dengan memanfaatkan sifat jurang atau jurang baris dan jurang lajur, anda boleh mencapai jarak yang tepat dan fleksibel dalam reka letak kotak flex anda, meningkatkan pengalaman pengguna dan daya tarikan visual.

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