Flex ile duyarlı düzen

flex-wrap ile duyarlı flex düzeni kurarsın.

flex-wrap ile esnek sarma

Flex kapsayıcı varsayılan olarak tüm öğeleri tek satırda sıralar. Ekran daralınca öğeler taşar ya da sıkışır. flex-wrap: wrap bildirimi öğelerin sığmadığında bir alt satıra geçmesini sağlar; böylece flex düzeni de duyarlı olur.

Etiketler, düğme grupları ve kart satırları için en pratik çözümdür: ne kadar öğe olursa olsun, ekran genişliğine uyum sağlar.

flex-basis ile temel genişlik

flex-wrap: wrap ile birlikte flex-basis kullanılırsa her öğenin temel genişliği belirlenir. flex: 1 1 200px öğenin 200 pikselden başlayıp esneyebileceğini söyler; sığmayan öğeler bir alt satıra geçer.

Bu üçlü (grow, shrink, basis) esnek davranır: dar ekranda tek sütun, geniş ekranda yan yana dizilir; ek media query gerekmez.

gap ile satır aralığı

flex-wrap: wrap kullanırken gap bildirimi hem yatay hem dikey boşluk bırakır. Tek değer girersen her iki yönde aynı boşluk; iki değer girersen ilki satırlar arası, ikincisi sütunlar arası boşluk olur.

Böylece kayan öğeler düzgün aralıklı dizilir; kenar boşluğu (margin) karışıklığı yaşanmaz.

Uygulama Etiket satırını duyarlı yap

.tags kapsayıcısını flex yap; öğeler sığmadığında alt satıra geçsin ve satırlar arasında 0.5rem boşluk olsun. display, flex-wrap ve gap bildirimlerini yaz.

Örnek çözümü göster

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Kendini test et

flex-wrap: wrap ne yapar?
```
.tags {
  display: flex;
  flex-wrap: wrap;
}
```
- Öğeler sığmadığında alt satıra geçer
- Öğeleri tek satırda zorlar
- Tüm öğeleri gizler
- Yatayda kaydırma çubuğu ekler
Cevabı göster

Öğeler sığmadığında alt satıra geçer — Doğru. wrap, sığmayan öğeleri bir sonraki satıra taşır; düzen bozulmaz.

Sarma değerini yaz

.tags {
  display: flex;
  flex-wrap: ____;
  gap: 0.5rem;
}

Cevabı göster

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

flex değerini anlamıyla eşleştir

flex-wrap: nowrap

Tek satırda zorla
flex-wrap: wrap

Sığmayanı alt satıra at
flex-wrap: wrap-reverse

Ters yönde sar
flex: 1 1 200px

200 pikselden başla, esne

Sıradaki ders: Gizleme ve gösterme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler