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.

Sıradaki ders: Meydan okuma - Grid magazin

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler