Özellik listesi

CSS kursu · Orta seviye · Ders 31/98

Flexbox ile özellik listesi ızgarası kurarsın.

Özellik listesi düzeni

Landing sayfasında ürünün sunduğu özellikler kart listesi halinde gösterilir. TaskFlow'da .features kapsayıcısı içinde .feature-card ögeleri dizilecek. Kartlar ekran daraldığında alt satıra geçmeli.

Bunun için kapsayıcıya display: flex ve flex-wrap: wrap veririz. flex-wrap: wrap ögelerin tek satıra sığmadığında bir alt satıra geçmesini sağlar. gap ise ögeler arasına tek bir değerle boşluk koyar; margin yazmaktan kısadır.

flex-grow ile eşit genişlik

Kartların geniş ekranda yan yana eşit genişlikte durmasını istiyoruz. flex-grow özelliği bir ögenin kalan boşluktan ne kadar pay alacağını belirler. flex-grow: 1 verildiğinde her kart aynı oranda büyür ve eşit genişliklerde dizilir.

padding kartın içine nefes aldırır; içeriği kenarlardan uzak tutar. border-radius ise köşeleri yuvarlar ve kartı yumuşak görünüm yapar.

Kart görünümünü tamamla

Şimdi kartların nasıl görüneceğini düşünelim. .features kapsayıcısı esnek olacak, flex-wrap: wrap ile kartlar sığmadıkça alt satıra geçecek. gap: 16px kartlar arasına eşit boşluk koyar.

Her .feature-card için flex-grow: 1 eşit genişlik, border-radius: 8px yuvarlatılmış köşe verir. Sonraki adımda bu iki bölümü dosyaya ekleyeceğiz.

Uygulama .features ve .feature-card bölümlerini ekle

Önceki dersin hero bölümünü içeren dosyayı al. Altına iki bölüm ekle:

.features sınıf seçicisi; içine display: flex, flex-wrap: wrap ve gap: 16px yaz.
.feature-card sınıf seçicisi; içine flex-grow: 1 ve border-radius: 8px yaz.

Her bildirimi noktalı virgülle kapat.

Örnek çözümü göster

/* TaskFlow landing sayfası */

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a2b4a;
}

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.feature-card {
  flex-grow: 1;
  border-radius: 8px;
}

Kendini test et

feature-card iç boşluğunu tamamla

.feature-card {
  flex-grow: 1;
  padding: ____;
  border-radius: 8px;
}

Cevabı göster

.feature-card {
  flex-grow: 1;
  padding: 20px;
  border-radius: 8px;
}

gap özelliği ne yapar?
- Esnek ögeler arasına boşluk koyar
- Ögenin dış boşluğunu ayarlar
- Yazı tipi boyutunu büyütür
- Kenar kalınlığını belirler
Cevabı göster

Esnek ögeler arasına boşluk koyar — Doğru. gap esnek ögeler arasına tek değerle boşluk koyar; margin yerine kısadır.
Özellikleri anlamlarıyla eşleştir

flex-wrap: wrap

Ögeler alt satıra geçer
flex-grow: 1

Öğe kalan alanı doldurur
gap: 16px

Ögeler arası boşluk
border-radius: 8px

Köşeleri yuvarlar

Orta seviye bölümündeki tüm dersler

Özellik listesi