Meydan okuma - Flexbox galeri
Flexbox ile duyarlı bir foto galeri kurarsın.
Flexbox ile galeri iskeleti
Bir foto galerisinde kartlar yatayda dizilir, daralan ekranda alt satıra iner. Bunu kurmanın en temiz yolu flexbox'tır. .gallery kabına display: flex verilir; flex-wrap: wrap ile kartlar sığmadığında taşar.
gap kartlar arası sabit boşluk bırakır; margin yerine kullanılır. justify-content kalan yatay boşluğu dağıtır: center ortalar, space-between kenarlara yayar. align-items dikey hizayı belirler. Bu dört bildirim esnek ve okunaklı bir galeri kurar.
Uygulama Galeriyi tamamla
Aşağıdaki CSS'i tamamla. .gallery kabı flex olsun, kartlar daralınca alt satıra insin ve kartlar arası 1rem boşluk olsun. Kartlar ana eksende ortada dursun. .card esneyip çoğalan boşluğu doldursun ve taban genişliği 200px olsun.
Örnek çözümü göster
/* galeri kabı */
.gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
/* kart */
.card {
flex: 1 1 200px;
}Kendini test et
-
flex-wrap değerini yaz
.gallery { display: flex; flex-wrap: ____; gap: 1rem; }Cevabı göster
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; } -
Flexbox özelliğini rolüyle eşleştir
- flex-wrap
- Daralan genişlikte alt satıra taşar
- gap
- Kartlar arası sabit boşluk
- justify-content
- Ana eksende dağıtım
- align-items
- Çapraz eksende hizalama
- display: flex
- Kabı esnek hale getirir
-
Kartların daralan ekranda alt satıra inmesi için hangi değer kullanılır?
.gallery { display: flex; flex-wrap: ???; gap: 1rem; }- nowrap
- wrap
- column
- space-between
Cevabı göster
wrap — Doğru. wrap, sığmayan kartları bir sonraki satıra taşır.