Gap
gap ile flex öğeleri arasındaki boşluğu öğrenirsin.
gap nedir?
gap özelliği flex ögeleri arasındaki boşluğu tanımlar. Margin yerine kullanılır; her ögeye tek tek margin yazmana gerek kalmaz. gap: 1rem yazarsan tüm ögeler arasında 1 rem boşluk olur.
gap yalnızca ögeler arasında çalışır; ilk ögeden önce ve son ögeden sonra boşluk eklemez. Bu davranış margin'in aksine daha tutarlıdır.
row-gap ve column-gap
gap iki ayrı özellik olarak da yazılabilir. row-gap satırlar arasındaki, column-gap sütunlar arasındaki boşluğu belirler. gap kısayolu tek değer alırsa her ikisine uygulanır.
İki değer verilirse ilki row-gap, ikincisi column-gap olur: gap: 1rem 2rem. flex-wrap ile satır atlayan düzenlerde satır aralığını ayarlamak için birebirdir.
Uygulama Kart ızgarasına gap ekle
Bir .cards esnek kapsayıcı kur. display: flex, flex-wrap: wrap ve gap: 1rem bildirimlerini ekle. Böylece kartlar satır atladığında da aralarında 1 rem boşluk kalır.
Örnek çözümü göster
/* kartlar arasına boşluk koy */
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}Kendini test et
-
gap özelliği hangi elemana yazılır?
- Her flex ögesine ayrı ayrı
- Yalnızca flex kapsayıcıya
- Yalnızca ilk ögeye
- HTML kök elemana
Cevabı göster
Yalnızca flex kapsayıcıya — Doğru. gap kapsayıcıya yazılır; tüm ögeler arasına otomatik uygulanır.
-
gap: 1rem 2rem bildirimini yaz
.grid { display: flex; flex-wrap: wrap; ____: 1rem 2rem; }Cevabı göster
.grid { display: flex; flex-wrap: wrap; gap: 1rem 2rem; } -
Her özelliği kapsamına eşle
- gap
- Satır ve sütun aralığı
- row-gap
- Yalnızca satır aralığı
- column-gap
- Yalnızca sütun aralığı
- gap: 1rem
- İki yönde 1 rem