Hero bölümü
Flexbox ile hero bölümü düzenini kurarsın.
Hero bölümü ne yapar?
Landing sayfasının en üstündeki hero bölümü, ziyaretçinin ilk gördüğü yerdir. Büyük bir başlık, kısa bir açıklama ve bir düğme içerir. TaskFlow hero bölümünü .hero seçicisiyle biçimlendireceğiz.
İçeriği yatay ve dikey olarak ortalamak için kapsayıcıyı esnek yapacağız. display: flex verildiğinde öge bir esnek kapsayıcıya dönüşür ve çocuk ögeleri sıralamaya başlar.
justify-content ve align-items
Esnek kapsayıcıda iki eksen vardır: ana eksen (öntanımlı olarak yatay) ve çapraz eksen (dikey). İçeriği hizalamak için iki özellik kullanırız.
justify-content çocukları ana eksen boyunca hizalar; center değeri ortalar. align-items ise çocukları çapraz eksen boyunca hizalar; yine center ile ortalanır. İkisini birlikte kullanmak içeriği tam ortalamaya yeter.
background-color ile hero arka planı
Hero bölümünü öne çıkarmak için koyu bir arka plan rengi verelim. background-color özelliği bir ögenin arka planını boyar. Üstündeki metnin okunabilmesi için açık renk yazı kullanılır.
TaskFlow'da koyu lacivert tonu #1a2b4a kullanacağız. Hex renkler diyez işaretiyle başlar ve altı rakam devam eder. Şimdi hero bölümünü dosyaya ekleyelim.
Uygulama Hero bölümünü ekle
Önceki dersin başlık yorumunu içeren dosyayı al. Altına bir .hero sınıf seçicisi bölümü ekle ve içine şu bildirimleri yaz: display: flex, justify-content: center, align-items: center ve background-color: #1a2b4a. 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;
}Kendini test et
-
display: flex ne yapar?
- Ögenin arka plan rengini değiştirir
- Metni yatay olarak ortalar
- Ögeyi esnek kapsayıcı yapar, çocukları sıralar
- Ögeyi gizler
Cevabı göster
Ögeyi esnek kapsayıcı yapar, çocukları sıralar — Doğru. display: flex ögeyi esnek kapsayıcıya çevirir ve çocukları dizmeye başlar.
-
justify-content değerini tamamla
.hero { display: flex; justify-content: ____; align-items: center; background-color: #1a2b4a; }Cevabı göster
.hero { display: flex; justify-content: center; align-items: center; background-color: #1a2b4a; } -
Flex özelliklerini anlamlarıyla eşleştir
- display: flex
- Esnek kapsayıcı yapar
- justify-content
- Ana eksen hizalaması
- align-items
- Çapraz eksen hizalaması
- background-color
- Arka plan rengi