CSS gap
özelliği, Chromium'un CSS Flexbox ve Çok Sütunlu düzen motorları için kullanılır.
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.
Tarayıcı uyumluluğu
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.
.grid { display: grid; gap: 10px; }
.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.
.grid { display: grid; gap: 10px 5%; }
.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.
.layout > :not(:last-child) { margin-bottom: 10px; margin-right: 10px; }
.layout > * + * { margin-bottom: 10px; margin-right: 10px; }
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 👍
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.
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.