Flex-wrap
flex-wrap ile öğelerin satır atlamasını öğrenirsin.
flex-wrap nedir?
flex-wrap, esnek öğelerin tek satıra sığmadığında ne yapacağını belirler. İki temel değer: nowrap (varsayılan) tüm öğeleri tek satıra sıkıştırır; dar alanlarda öğeler küçülür ya da taşar. wrap ise sığmayan öğeleri sonraki satıra atlatır.
Kart galerileri ve etiket bulutlarında wrap neredeyse zorunludur.
wrap değeri
wrap seçtiğinde, kapsayıcının genişliğine sığmayan öğeler otomatik olarak bir alt satıra geçer. Bu, ekran küçüldükçe kartların yan yana değil, alt alta dizilmesini sağlar; mobil özet listeleri için idealdir.
Öğelerin boyutu değişmez; yalnızca sıra sayısı artar. nowrap'ta ise öğeler küçülerek tek satırda kalmaya zorlanır.
Kart sırası kurma
Bir kart sırası kurmak için önce display: flex, sonra flex-wrap: wrap yazarsın. Kapsayıcı genişledikçe kartlar yan yana, daraldıkça alt alta dizilir.
Bu davranış, masaüstünde üç sütun, telefonda tek sütun gösteren özet listeleri için idealdir. nowrap seçseydin telefon ekranında kartlar ezilirdi.
Uygulama Kart sırasına sarma ekle
Bir .cards sınıf seçicisi ekle. İçine display: flex ve flex-wrap: wrap bildirimlerini yaz. Böylece kartlar dar ekranda alt satıra atlar.
Örnek çözümü göster
/* kart sırasına sarma ekle */
.cards {
display: flex;
flex-wrap: wrap;
}Kendini test et
-
flex-wrap: nowrap ne yapar?
.cards { display: flex; flex-wrap: nowrap; }- Tüm öğeleri tek satırda tutar
- Sığmayan öğeleri alt satıra atlatır
- Öğeleri gizler
- Öğeleri dikey dizer
Cevabı göster
Tüm öğeleri tek satırda tutar — Doğru. nowrap tüm öğeleri tek satırda tutar; sığmazsa küçülür ya da taşar.
-
Kartların satır atlamasını sağla
.cards { display: flex; flex-wrap: ____; }Cevabı göster
.cards { display: flex; flex-wrap: wrap; } -
flex-wrap değerlerini eşleştir
- wrap
- Sığmayanı alt satıra atlatır
- nowrap
- Tek satırda tutar
- flex-wrap
- Sarma bildirimi