Chromium mendapatkan celah Flexbox

Properti gap CSS telah tersedia untuk mesin tata letak Multi-Kolom dan CSS Flexbox Chromium.

Adam Argyle
David Grogan
David Grogan
GitHub

Kesenjangan CSS

gap bersifat relatif alur, yang berarti berubah secara dinamis berdasarkan arah aliran konten. Misalnya, gap akan otomatis menyesuaikan dengan berbagai nilai writing-mode atau direction yang Anda tetapkan untuk pengguna internasional Anda. Hal ini secara signifikan mengurangi beban tantangan jarak bagi komponen dan penulis CSS. Mengurangi penskalaan kode lebih lanjut.

Gap menunjukkan dukungan pelokalan, karena fungsi tersebut menangani perubahan arah dan mode penulisan: Codepen | Tweet

Kompatibilitas browser

Dukungan Browser

  • 57
  • 16
  • 52
  • 10.1

Sumber

Penggunaan

gap menerima panjang atau persentase CSS sebagai nilai.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}


Celah dapat dilewati 1 panjang, yang akan digunakan untuk baris dan kolom.

Singkatan
.grid {
  display: grid;
  gap: 10px;
}
Menetapkan baris dan kolom bersama-sama sekaligus
Diperluas
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


Celah dapat dilewati 2 panjang, yang akan digunakan untuk baris dan kolom.

Singkatan
.grid {
  display: grid;
  gap: 10px 5%;
}
Menetapkan baris dan kolom secara terpisah sekaligus
Diperluas
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

Sebelum gap berada di Flexbox, strategi melibatkan margin negatif, pemilih yang kompleks, pemilih class pseudo jenis :last atau :first, atau cara lain untuk mengelola ruang dari kumpulan turunan yang disusun secara dinamis dan digabungkan.

Percobaan Sebelumnya

Berikut adalah pola-pola yang telah digunakan orang-orang untuk mendapatkan spasi mirip-celah.

pemilih class pseudo
.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
burung hantu lobotom
.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}
Sumber

Namun, hal di atas bukan pengganti penuh untuk gap, dan sering kali memerlukan penyesuaian @media atau :lang() untuk memperhitungkan skenario penggabungan, mode, atau arah penulisan. Menambahkan satu atau dua kueri media sepertinya tidak akan terlalu buruk, tetapi kueri tersebut dapat bertambah dan menyebabkan logika tata letak yang rumit.

Yang sebenarnya dimaksudkan penulis di atas adalah tidak adanya sentuhan item turunan.

Antidot: celah

.layout {
  display: flex;
  gap: 10px;
}

Pada 2 contoh pertama (tanpa gap Flexbox), turunan ditargetkan dan diberi jarak dari elemen lain. Dalam contoh kesenjangan penangkal, container memiliki spasi. Setiap turunan dapat membebaskan bebannya sendiri, sekaligus memusatkan jarak kepemilikan. Menyederhanakan konsistensi. Mengurutkan ulang, mengubah area pandang, menghapus elemen, menambahkan elemen baru, dll. serta jarak tetap konsisten. Tidak ada pemilih baru, tidak ada kueri media baru, hanya spasi.

Update Chromium DevTools

Dengan update ini, perubahan pada Chromium DevTools juga akan diterapkan, perhatikan bagaimana panel Styles menangani grid-gap dan gap sekarang 👍

Kantor dengan dua orang yang bekerja di satu meja.
Devtools menampilkan grid-gap dan gap, dengan gap ditampilkan di bawah grid-gap agar kaskade dapat menggunakan sintaksis terbaru.

DevTools mendukung grid-gap dan gap, ini karena gap pada dasarnya adalah alias untuk sintaksis sebelumnya.

Potensi tata letak baru

Dengan Flexbox gap, kami mendapatkan lebih dari sekadar kenyamanan. Kita membuka tata letak intrinsik yang hebat, berjarak sempurna. Dalam video dan contoh kode berikut di bawah ini, Grid tidak dapat mencapai tata letak yang dapat dilakukan Flexbox. {i>Grid<i} harus memiliki baris dan kolom yang sama, meskipun jika ditetapkan secara intrinsik.

Tweet

Selain itu, perhatikan seberapa dinamis jarak antar-turunan jika gabungan tersebut secara intrinsik seperti itu. Kueri media tidak dapat mendeteksi penggabungan seperti itu untuk melakukan penyesuaian yang cerdas. gap Flexbox dapat, dan akan, melakukannya untuk Anda di semua internasionalisasi.

Multi-kolom gap

Selain Flexbox yang mendukung sintaksis gap, tata letak multi-kolom juga mendukung sintaksis gap yang lebih pendek.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

Cukup bagus.