Fiyat kartları
Flexbox ile fiyat kartları düzenini kurarsın.
Fiyat kartları düzeni
Fiyatlandırma bölümünde planları (ücretsiz, pro, kurumsal) alt alta göstermek istiyoruz. .pricing kapsayıcısı çocuklarını dikey dizsin. flex-direction özelliği dizilim yönünü belirler; column değeri çocukları alt alta dizer.
Öntanımlı yön row (yatay) olduğundan, dikey istiyorsak açıkça flex-direction: column yazmalıyız. Sonra justify-content ve align-items ile hizalama yapabiliriz.
Dikey kapsayıcıda hizalama
Dikey bir kapsayıcıda eksenler yer değiştirir. flex-direction: column iken ana eksen dikey, çapraz eksen yatay olur. Yine de özellikler aynı çalışır.
justify-content: center kartları dikeyde ortalar; align-items: center kartları yatayda ortalar. Böylece fiyat kartları hem dikey hem yatay olarak hizalanır ve düzen temiz görünür.
box-shadow ile derinlik
Fiyat kartını öne çıkarmak için gölge verelim. box-shadow özelliği bir ögenin kutusunun arkasına gölge çizer. En basit biçimi yatay kayma, dikey kayma ve bulanıklık değerleri alır.
Örneğin box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) hafif aşağı kaymış, yumuşak bir gölge verir. Kart zeminden hafifçe kalkmış gibi görünür ve göz düzeni takip eder. Şimdi pricing bölümünü dosyaya ekleyelim.
Uygulama .pricing ve .price-card bölümlerini ekle
Önceki dersin tüm bölümlerini içeren dosyayı al. Altına iki bölüm ekle:
.pricingsınıf seçicisi; içine display: flex, flex-direction: column, justify-content: center ve align-items: center yaz..price-cardsınıf seçicisi; içine box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) 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;
}
.pricing {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.price-card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}Kendini test et
-
flex-direction: column ne yapar?
- Çocukları yatay olarak dizer
- Ögeleri gizler
- Kapsayıcıyı ortalı yapar
- Çocukları dikey olarak alt alta dizer
Cevabı göster
Çocukları dikey olarak alt alta dizer — Doğru. flex-direction: column çocukları alt alta, dikey olarak dizilim sağlar.
-
align-items değerini tamamla
.pricing { display: flex; flex-direction: column; align-items: ____; justify-content: center; }Cevabı göster
.pricing { display: flex; flex-direction: column; align-items: center; justify-content: center; } -
Özellikleri anlamlarıyla eşleştir
- flex-direction: column
- Ögeleri dikey dizer
- justify-content: center
- Ana eksende ortalar
- align-items: center
- Çapraz eksende ortalar
- box-shadow
- Karta derinlik katar