Chromium, Flexbox açığını kapatıyor

CSS gap özelliği, Chromium'un CSS Flexbox ve Çok Sütunlu düzen motorları için kullanılır.

Adem Parça
David Grogan
David Grogan
GitHub

CSS Boşluğu

gap akışa bağlıdır. Yani içerik akışının yönüne göre dinamik olarak değişir. Örneğin gap, uluslararası kullanıcılarınız için belirlediğiniz farklı writing-mode veya direction değerlerine göre otomatik olarak ayarlanır. Bu, bileşen ve CSS yazarı için boşluk bırakma yükünü önemli ölçüde hafifletir. Daha az kod ölçeklendirmesi.

Yön ve yazma modundaki değişiklikleri ele alırken yerelleştirme desteğini gösteren boşluk: Codepen | Tweet

Tarayıcı uyumluluğu

Tarayıcı Desteği

  • 57
  • 16
  • 52
  • 10.1

Kaynak

Kullanım

gap, herhangi bir CSS uzunluğu veya yüzdesi değerini değer olarak kabul eder.

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


Boşluk, hem satır hem de sütun için kullanılacak olan 1 uzunlukta yürütülebilir.

Steno
.grid {
  display: grid;
  gap: 10px;
}
Hem satırları hem de sütunları aynı anda birbirine ayarlama
Genişletildi
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


Boşluk, satır ve sütun için kullanılacak olan 2 uzunlukta yürütülebilir.

Steno
.grid {
  display: grid;
  gap: 10px 5%;
}
Hem satırları hem de sütunları aynı anda ayrı olarak ayarlama
Genişletildi
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

Flexbox gap

gap Flexbox'tan önce stratejiler negatif marjlar, karmaşık seçiciler, :last veya :first türünde sanal sınıf seçiciler veya dinamik olarak düzenlenmiş ve sarmalama alt öğesi grubunun alanını yönetmek için başka yollar içeriyordu.

Önceki Denemeler

Aşağıda, insanların boşluk benzeri boşluklar elde etmek için kullandığı kalıplar yer almaktadır.

sözde sınıf seçiciler
.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
lobotomize baykuş
.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}
Kaynak

Ancak yukarıdakiler gap için tam bir alternatif değildir ve sarmalama senaryolarını, yazma modlarını veya yönü hesaba katmak için genellikle @media veya :lang() ayarlamaları gerekir. Bir veya iki medya sorgusu eklemek o kadar da kötü görünmeyebilir, ancak eklemesi yaparak karmaşık düzen mantığına yol açabilir.

Yukarıdaki yazarın asıl amacı, alt öğelerden hiçbirinin söz konusu olmamasıydı.

Pandemi: boşluk

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

İlk 2 örnekte (Flexbox gap olmadan), alt öğeler hedeflenir ve bunlara diğer öğelerdeki boşluklar atanır. Antidot boşluğu örneğinde, kapsayıcı boşluğa sahiptir. Her çocuk yükten kurtulabilir ve aynı zamanda alan sahipliğini merkezi bir hale getirebilir. Tutarlılık basitleştiriliyor. Yeniden sıralayın, görüntü alanlarını değiştirin, öğeleri kaldırın, yeni öğeler ekleyin vb. işlemler sırasında boşluklar tutarlı olsun. Yeni seçici, yeni medya sorgusu yok, yalnızca boşluk var.

Chromium Geliştirici Araçları güncellemeleri

Chromium Geliştirici Araçları'nda yapılan bu güncellemelerle birlikte, Stiller bölmesinin grid-gap ve gap öğelerini artık nasıl işlediğine dikkat edin 👍

Masada çalışan iki kişinin bulunduğu bir ofis.
Geliştirici araçları hem grid-gap hem de gap öğelerini gösterir. Basamakların en son söz dizimini kullanmasına olanak tanımak için grid-gap altında gap gösterilmiştir.

Geliştirici Araçları hem grid-gap hem de gap'yi destekler. Bunun nedeni, gap özelliğinin önceki söz diziminin takma adı olmasıdır.

Yeni düzen potansiyeli

Flexbox gap sayesinde rahatlıktan çok daha fazlasını sunuyoruz. Güçlü, kusursuz bir şekilde aralıklı, doğal düzenlerin kilidini açıyoruz. Aşağıdaki videoda ve aşağıdaki kod örneğinde Grid, Flexbox'ın gerçekleştirebileceği düzeni uygulayamaz. Izgara, doğal olarak atanmış olsa bile eşit satırları ve sütunları olmalıdır.

Tweet

Ayrıca, alt öğeler doğal olarak bu şekilde sarmalandığında arasındaki boşluğun ne kadar dinamik olduğuna dikkat edin. Medya sorguları, akıllı ayarlamalar yapmak için bu şekilde sarmalamayı algılayamaz. Flexbox gap, tüm uluslararası kullanımlarda bunu sizin için yapabilir ve yapacaktır.

Çok sütunlu gap

Çok sütunlu düzenler, gap söz dizimini destekleyen Flexbox'ın yanı sıra daha kısa olan gap söz dizimini de destekler.

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

Rad.