Chromium mendapatkan celah Flexbox

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

Adam Argyle

David Grogan

Jeda CSS

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

Kompatibilitas browser

Penggunaan

gap menerima panjang atau persentase CSS sebagai nilai.

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

Gap dapat diteruskan 1 panjang, yang akan digunakan untuk baris dan kolom.

.grid {
  display: grid;
  gap: 10px;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

Gap dapat meneruskan 2 panjang, yang akan digunakan untuk baris dan kolom.

.grid {
  display: grid;
  gap: 10px 5%;
}

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

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

Percobaan Sebelumnya

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

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

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

Yang benar-benar diinginkan penulis di atas adalah tidak ada item turunan yang bersentuhan.

The Antidote: gap

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

Dalam 2 contoh pertama (tanpa Flexbox gap), turunan ditargetkan dan diberi spasi dari elemen lain. Dalam contoh celah antidote, penampung memiliki spasi. Setiap turunan dapat meringankan bebannya, sekaligus memusatkan kepemilikan spasi. Menyederhanakan konsistensi. Urutkan ulang, ubah area pandang, hapus elemen, tambahkan elemen baru, dll. serta spasi tetap konsisten. Tidak ada pemilih baru, tidak ada kueri media baru, hanya ruang.

Info terbaru Chromium DevTools

Dengan update ini, perubahan pada Chromium DevTools akan terjadi. Perhatikan cara panel Styles menangani grid-gap dan gap sekarang 👍

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

Potensi tata letak baru

Dengan Flexbox gap, kita mendapatkan lebih dari sekadar kemudahan. Kami membuka tata letak intrinsik yang canggih dan memiliki spasi yang sempurna. Dalam video dan contoh kode berikut di bawah, Grid tidak dapat mencapai tata letak yang dapat dilakukan Flexbox. Petak harus memiliki baris dan kolom yang sama, meskipun ditetapkan secara intrinsik.

Selain itu, perhatikan betapa dinamis spasi antar-turunan saat digabungkan secara intrinsik seperti itu. Kueri media tidak dapat mendeteksi penggabungan seperti itu untuk melakukan penyesuaian cerdas. Flexbox gap dapat, dan akan, melakukannya untuk Anda di semua internasionalisasi.

gap multi-kolom

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;
}

Keren banget.