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

Sıradaki ders: Özet - Kart ızgarası

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler