Özet - Kart ızgarası

CSS kursu · Orta seviye · Ders 12/98

Flexbox ile duyarlı kart ızgarası kurarsın.

Özet — Kart ızgarası

Bu grupta flex ögelerinin büyüme, daralma ve sıralanmasını; tek öge hizalamayı ve ögeler arası boşluğu öğrendin. Şimdi bunları bir araya getirip duyarlı bir kart ızgarası kuracağız.

Izgaranın özellikleri: kartlar eşit büyüsün, daralmasın, en az 200 piksel genişlikten başlasın, satır atladığında aralarında 1 rem boşluk kalsın.

Hangi özellikleri kullanacağız?

İlk olarak .cards kapsayıcısını flex yapıp flex-wrap: wrap ile satır atlamayı açacağız. Kartlar arasına gap: 1rem vereceğiz; böylece satır atladıklarında da düzenli duracaklar.

Her kart için flex: 1 0 200px yazacağız. Bu bildirim kartın boşluğu orantılı paylaşmasını, daralmamasını ve 200 pikselden başlamasını sağlar.

Uygulama Kart ızgarası kapsayıcısını kur

Bir .cards esnek kapsayıcı kur. display: flex, flex-wrap: wrap ve gap: 1rem bildirimlerini ekle. Kartlar henüz gerekmez; yalnızca kapsayıcıyı yaz.

Örnek çözümü göster

/* kart ızgarası kapsayıcısı */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Uygulama Kartlara flex: 1 0 200px ver

Bir .cards > .card seçicisi ekle ve flex: 1 0 200px bildirimini yaz. Böylece her kart en az 200 pikselden başlar, daralmaz ve boşluğu eşit paylaşır.

Örnek çözümü göster

/* kartlara esneklik ver */
.cards > .card {
  flex: 1 0 200px;
}

Kendini test et

Izgaranın her parçasını rolüne eşle

flex-wrap: wrap

Satır atlamayı açar
gap: 1rem

Ögeler arası boşluk
flex: 1 0 200px

Büyü, daralma, taban
display: flex

Esnek kapsayıcı
flex: 1 0 200px ne anlama gelir?
- grow 1, shrink 0, basis 200px
- grow 0, shrink 1, basis 200px
- grow 1, shrink 200, basis 0
- grow 200, shrink 1, basis 0
Cevabı göster

grow 1, shrink 0, basis 200px — Doğru. flex kısayolu sırayla grow, shrink ve basis değerlerini alır.

Özet - Kart ızgarası