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