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.

Adam Argyle

David Grogan

CSS Gap

Önemli terim: gap, çocuklar arasındaki aralıktır. Bu tür boşluklara "oluk" veya "geçit" adı verildiğini duymuş olabilirsiniz. Yalnızca çocuk kutularının kenarlarının birbirine değdiği yerlerde boşluk vardır.

gap, akışa göreli olduğundan 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 ayarladığınız farklı writing-mode veya direction değerlerine göre otomatik olarak ayarlanır. Bu, bileşen ve CSS yazarı için aralık sorunlarının yükünü önemli ölçüde azaltır. Daha az kodla daha fazla ölçeklendirme.

Yön ve yazma modu değişikliklerini işlediği için yerelleştirme desteğini gösteren boşluk: Codepen | Tweet

Tarayıcı uyumluluğu

Browser Support

• 57
• 16
• 52
• 10.1

Source

Kullanım

gap, değer olarak herhangi bir CSS uzunluğunu veya yüzdesini 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 1 uzunluk olarak iletilebilir.

Steno

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

Hem satırları hem de sütunları birlikte ayarlama

Genişletildi

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

Boşluk, satır ve sütun için kullanılacak 2 uzunluk olarak iletilebilir.

Steno

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

Hem satırları hem de sütunları ayrı ayrı aynı anda ayarlama

Genişletildi

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

Flexbox gap

gap Flexbox'ta yokken stratejiler, negatif kenar boşlukları, karmaşık seçiciler, :last veya :first türü sözde sınıf seçiciler ya da dinamik olarak yerleştirilmiş ve sarmalanmış bir dizi alt öğenin alanını yönetmek için başka yöntemler içeriyordu.

Önceki Denemeler

Aşağıda, kullanıcıların boşluk benzeri aralıklar elde etmek için kullandığı kalıplar verilmiştir.

sözde sınıf seçiciler

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

lobotomize edilmiş baykuş

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

Kaynak

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

Yukarıdaki yazarın asıl amacı, alt öğelerin hiçbirinin birbirine dokunmamasıydı.

The Antidote: gap

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

Not: Boşlukların sahipliği alt öğeden üst öğeye geçer.

İlk 2 örnekte (Flexbox olmadan gap), alt öğeler hedeflenir ve diğer öğelerden aralık atanır. Antidot boşluğu örneğinde, kapsayıcı boşluğa sahiptir. Her çocuk bu yükten kurtulabilir ve aynı zamanda aralık sahipliğini merkezileştirebilir. Tutarlılığı basitleştirme. Yeniden sıralama, görüntü alanlarını değiştirme, öğeleri kaldırma, yeni öğeler ekleme gibi işlemler yapıldığında aralıklar tutarlı kalır. Yeni seçiciler veya yeni medya sorguları yok, yalnızca boşluk var.

Chromium Geliştirici Araçları güncellemeleri

Bu güncellemelerle birlikte Chromium Geliştirici Araçları'nda da değişiklikler yapıldı. Stiller bölmesinin artık grid-gap ve gap'yi nasıl işlediğine dikkat edin 👍

Geliştirici Araçları hem grid-gap hem de gap öğesini gösterir. Basamaklandırmanın en yeni söz dizimini kullanabilmesi için gap, grid-gap öğesinin altında gösterilir.

Geliştirici Araçları hem grid-gap hem de gap öğesini destekler. Bunun nedeni, gap öğesinin aslında önceki söz dizimlerinin bir takma adı olmasıdır.

Yeni düzen potansiyeli

Flexbox gap ile kolaylığın ötesine geçiyoruz. Güçlü, mükemmel aralıklı ve doğal düzenler sunuyoruz. Aşağıdaki videoda ve kod örneğinde, Grid'in Flexbox'ın elde edebileceği düzeni elde edemediği gösterilmektedir. Izgara, satırları ve sütunları eşit olmalıdır. Bu, satır ve sütunlar doğal olarak atanmış olsa bile geçerlidir.

Tweet

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

Çok sütunlu gap

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

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

Çok iyi.