Chromium mendapatkan celah Flexbox

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

Adam Argyle

David Grogan

CSS Gap

Istilah utama: gap adalah jarak antar-anak. Anda mungkin pernah mendengar jenis ruang ini disebut "gutter" atau "lorong". Ini adalah ruang hanya di tempat tepi kotak turunan bersentuhan.

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

Perbedaan yang menunjukkan dukungan pelokalan, karena menangani perubahan pada arah dan mode penulisan: Codepen | Tweet

Kompatibilitas browser

Browser Support

• 57
• 16
• 52
• 10.1

Source

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.

Singkatan

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

Menyetel baris dan kolom bersama-sama sekaligus

Diperluas

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

Gap dapat meneruskan 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 ada di Flexbox, strategi melibatkan margin negatif, pemilih kompleks, :last atau pemilih pseudo-class jenis :first, atau cara lain untuk mengelola ruang dari sekumpulan turunan yang disusun dan di-wrap secara dinamis.

Percobaan Sebelumnya

Berikut adalah pola yang digunakan orang untuk mendapatkan jarak seperti celah.

pemilih class semu

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

burung hantu yang dilobotomi

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

Sumber

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

Yang sebenarnya diinginkan penulis di atas adalah agar tidak ada item anak yang bersentuhan.

The Antidote: gap

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

Catatan: Kepemilikan jarak bergeser dari turunan ke induk

Dalam 2 contoh pertama (tanpa Flexbox gap), turunan ditargetkan dan diberi jarak dari elemen lain. Dalam contoh kesenjangan penawar, penampung memiliki jarak. Setiap turunan dapat membebaskan dirinya dari beban, sekaligus memusatkan kepemilikan jarak. Menyederhanakan konsistensi. Menyusun ulang, mengubah area tampilan, menghapus elemen, menambahkan elemen baru, dll. dan jarak tetap konsisten. Tidak ada pemilih baru, tidak ada kueri media baru, hanya ruang.

Update Chromium DevTools

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

Devtools menampilkan grid-gap dan gap, dengan gap ditampilkan di bawah grid-gap agar kaskade menggunakan sintaksis terbaru.

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. Kita dapat membuat tata letak intrinsik yang canggih dan berjarak sempurna. Dalam video dan contoh kode berikut di bawah, petak tidak dapat mencapai tata letak yang dapat dilakukan Flexbox. Petak harus memiliki baris dan kolom yang sama, meskipun ditetapkan secara intrinsik.

Tweet

Perhatikan juga bagaimana jarak dinamis antar-turunan saat mereka di-wrap secara intrinsik seperti itu. Kueri media tidak dapat mendeteksi pelipatan seperti itu untuk melakukan penyesuaian cerdas. Flexbox gap 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 keren.