CSS'deki boşluk özelliği, ızgara, esnek ve çok sütunlu mizanpajlarda satırlar ve sütunlar arasındaki boşluk olan olukların boyutunu belirten row-gapve column-gapbelirten bir kısaltmadır .
/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )
gapMülkü çalışırken görmek için aşağıdaki demodaki kaydırıcıyı kullanın :
Sözdizimi
gap bir veya iki değeri kabul eder:
- Tek bir değer hem ayarlar
row-gapvecolumn-gapaynı değerle. - İki değer kullanıldığında, birincisi
row-gapve ikincisicolumn-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )CSS Izgara Yerleşim Modülünün belirtimi, grid-gapözelliği kullanarak ızgara izleri arasındaki boşluğu tanımladı . gapboşlukların flexbox gibi birden çok CSS mizanpaj yönteminde tanımlanabilmesi için bunun yerini alması amaçlanmıştır, ancak grid-gapyine de bir tarayıcının uyguladığı, grid-gapancak daha yeni gapözelliği desteklemeye başlamadığı durumlarda kullanılması gerekir .
Değerler
gap aşağıdaki değerleri kabul eder:
normal: (Varsayılan) Tarayıcı, çok sütunlu düzen için 1em ve diğer tüm düzen bağlamları (ör. Izgara ve esnek) için 0px olarak kullanılan bir değer belirtir.: Gibi herhangi bir geçerli ve negatif olmayan CSS uzunluğupx,em,remve%diğerleri.: Öğenin boyutuna göre negatif olmayan bir yüzde değeri olarak boşluğun boyutu. (Ayrıntılar için aşağıya bakın.)initial: Özelliğin varsayılan ayarı olannormal.inherit: Ebeveynin boşluk değerini benimser.unset: Öğeden akımı kaldırırgap.
Boşluk özelliklerindeki yüzdeler
Boşluk boyutundaki bir kabın boyutu kesin olduğunda, gapyüzdeleri herhangi bir düzen türünde kapsayıcının içerik kutusunun boyutuna göre çözümler.
Başka bir deyişle, tarayıcı kabın boyutunu bildiğinde gap,. Örneğin, kapsayıcının yüksekliği 100 piksel olduğunda ve gap% 10'a ayarlandığında, tarayıcı 100 pikselin% 10'unun 10 piksel olduğunu bilir.
Ancak tarayıcı boyutu bilmediğinde, "Neyin% 10'u?" Diye merak edecektir. Bu durumlarda, gapdüzen türüne göre farklı davranır.
Bir ızgara düzeninde, yüzdeler , iç boyut katkılarını belirlemek için sıfıra karşı çözümlenir, ancak kutunun içeriğini düzenlerken öğenin içerik kutusuna göre çözümlenir, yani öğeler arasına boşluk koyar, ancak boşluk kapın boyutunu etkilemez.
Bu demoda, konteynerin yüksekliği kesin değildir. gapBoyutu artırdığınızda ne olacağını görün . Ardından gappiksel birimlerini ayarlayın ve tekrar deneyin:
Esnek bir mizanpajda, yüzdeler her durumda sıfıra karşı çözümlenir, bu da kapsayıcının boyutu tarayıcı tarafından bilinmediğinde boşlukların uygulanmayacağı anlamına gelir:
Calc () işlevini boşlukla kullanma
calc()İşlevini boyutunu belirtmek için kullanabilirsiniz , gapancak bu yazının yazıldığı sırada Safari ve iOS'ta bunun için destek yoktur .
.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); )
.grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )Örnekler
gapÖzelliği ızgara, esnek ve çok sütunlu düzenleri kullanılmak üzere tasarlanmıştır. Bazı örnekleri inceleyelim.
Izgara düzeni
Aşağıdaki demoda , sırasıyla ızgara satırları ve ızgara sütunları arasındaki olukları tanımlayan bir ızgara kabındaki ve özelliklerini gapbelirtmek için kullanıldığını görebilirsiniz :row-gapcolumn-gap
Flex düzeni
Bir esnek kabın ana eksenine boşluk uygulamak , esnek düzeninin tek bir satırındaki esnek öğeler arasındaki boşluğu gösterir .
İşte column-gapsatır yönünde kullanılır:
İşte row-gapsütun yönünde kullanılır:
Uygulama gapiçin çapraz eksen esnek bir kabın aralığım belirtir esnek hatları arasında esnek düzeni.
İşte row-gapsatır yönünde:
İşte column-gapsütun yönünde:
Çok sütunlu düzen
column-gapsütun kutuları arasında boşluklar oluşturmak için çok sütunlu düzenlerde görünür, ancak row-gapyalnızca sütunlarda çalıştığımız için bunun bir etkisi olmadığını unutmayın . gaphala bu bağlamda kullanılabilir, ancak yalnızca column-gapuygulanacaktır.
Bir sonraki demoda görebileceğiniz gibi, gapmülk 2rem değerine sahip olsa da, sütunlar halinde çalıştığımız için öğeleri her iki yön yerine yalnızca yatay olarak ayırıyor:
Daha fazla bilirsen…
Mülkle çalışma konusunda dikkate değer birkaç şey var gap.
İstenmeyen boşlukları önlemenin güzel bir yolu
Öğeler arasında boşluk oluşturmak için hiç kenar boşluğu kullandınız mı? Dikkatli olmazsak, öğe grubundan önce ve sonra fazladan boşluk bırakabiliriz.
Genellikle negatif kenar boşlukları eklemeyi veya belirli öğelerden marjı kaldırmak için sözde seçicilere başvurmayı gerektiren çözüm. Ancak gapdaha modern düzen yöntemlerinde kullanmanın güzel yanı , yalnızca öğeler arasında boşluğunuz olmasıdır. Başlangıçta ve sonda ekstra çarpıntı asla sorun değildir!
Ancak, kullanım sırasında eşyaların etrafında boşluk olmasını istiyorsanız , kabın etrafına şu şekilde gapkoyun padding:
.container ( display: flex; gap: 1rem; padding: 1rem; )Cilt payı boyutu her zaman boşluk değerine eşit değildir
gapMülkiyet kalemleri arasındaki boşluğu koyabilirsiniz tek şey değil. Kenar boşlukları, dolgular justify-contentve align-contentayrıca cilt payı boyutunu artırabilir ve gerçek gapdeğeri etkileyebilir .
Aşağıdaki örnekte bir 1em ayarlıyoruz, gapancak görebileceğiniz gibi, justify-contentve gibi dağıtılmış hizalamaların kullanımından kaynaklanan öğeler arasında çok daha fazla boşluk var align-content:
Tarayıcı desteği
Özellik sorguları genellikle bir tarayıcının belirli bir özelliği destekleyip desteklemediğini kontrol etmenin güzel bir yoludur, ancak bu durumda gapözelliği flexbox'ta kontrol ederseniz, bir özellik sorgusu düzen modları arasında ayrım yapmayacağı için yanlış bir pozitif alabilirsiniz. Başka bir deyişle, olumlu bir sonuçla sonuçlanan esnek bir mizanpajda desteklenebilir, ancak bir ızgara düzeninde kullanıldığında aslında desteklenmez.
Izgara düzeni
| IE | Kenar | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Hayır | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android Tarayıcı | Android için Chrome | Android için Firefox |
|---|---|---|---|---|
| 12+ | Hayır | 81+ | 84+ | 68+ |
Calc () değerlerine sahip ızgara düzeni
| IE | Kenar | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Hayır | 84+ | 79+ | 84+ | Hayır | 69+ |
| iOS Safari | Opera Mobile | Android Tarayıcı | Android için Chrome | Android için Firefox |
|---|---|---|---|---|
| Hayır | Hayır | 81+ | 84+ | 68+ |
Yüzde değeri olan ızgara düzeni
| IE | Kenar | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Hayır | 84+ | 79+ | 84+ | Hayır | 69+ |
| iOS Safari | Opera Mobile | Android Tarayıcı | Android için Chrome | Android için Firefox |
|---|---|---|---|---|
| Hayır | Hayır | 81+ | 84+ | 68+ |
Flex düzeni
Kullanmak için şartname gapflexbox'a ile Çalışma Taslak durumunda şu anda.
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 84 | 63 | Hayır | 84 | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Hayır | Hayır |
Çok sütunlu düzen
| IE | Kenar | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Hayır | 84+ | 79+ | 84+ | Hayır | 69+ |
| iOS Safari | Opera Mobile | Android Tarayıcı | Android için Chrome | Android için Firefox |
|---|---|---|---|---|
| Hayır | Hayır | 81+ | 84+ | 68+ |
Daha fazla bilgi
- CSS Kutusu Hizalama Modülü Seviye 3
- Chromium, Flexbox boşluğunu kapatır (Bilet # 761904)
- WebKit CSS Özellik Durumu
İlişkili
- Izgara Düzeni
- Flexbox Düzeni
- Çok Sütunlu Düzen