3. Ders: Flexbox ile Esnek ve Kusursuz Düzenler Tasarlama

Şimdi tasarımı şekillendirirken en çok kullanacağımız, modern CSS'in can damarı olan bir konuya geçiyoruz.

3. Dersimizde, eski ve hantal hizalama yöntemlerini (float, table vb.) bir kenara bırakıp, Blogger bileşenlerini ve düzenlerini tereyağından kıl çeker gibi hizalamamızı sağlayan Flexbox (Flexible Box) modülünü öğreneceğiz.

Flexbox, tek boyutlu (sadece satır veya sadece sütun bazlı) bir yerleşim modelidir. Amacı, bir kutunun içindeki elemanların alan dağılımını, hizalanmasını ve sıralanmasını otomatik olarak en optimize şekilde yönetmektir.

1. Flexbox Mantığı: Anne (Kapsayıcı) ve Çocuklar

Flexbox kullanırken her zaman bir Kapsayıcı (Flex Container) ve onun doğrudan içindeki Esnek Elemanlar (Flex Items) vardır. Tüm kuralları anneye söyleriz, çocuklar ona göre hizalanır.

Bir alanı esnek yapmak için kapsayıcı sınıfa şu sihirli kodu yazarız:

.kapsayici {
display: flex;
}

Bu kodu yazdığınız anda, içindeki tüm elemanlar yan yana dizilmeye başlar.

2. En Çok Kullanacağımız Flexbox Silahları

Elemanları yönlendirmek ve hizalamak için kapsayıcıya uygulayacağımız temel özellikler şunlardır:

flex-direction (Yön): Elemanların hangi yöne dizileceğini belirler.
- row (Varsayılan): Yan yana dizer.
- column: Yukarıdan aşağıya (sütun şeklinde) dizer.
justify-content (Ana Eksen Hizalaması): Elemanları yatayda (eğer row ise) nasıl dağıtacağımızı belirler.
- center: Hepsini ortalar.
- space-between: İlk elemanı başa, son elemanı sona yaslar; aradaki boşluğu eşit dağıtır. (Menüler için harikadır!)
- space-around: Elemanların etrafına eşit boşluklar bırakır.
align-items (Dikey Eksen Hizalaması): Elemanları dikeyde nasıl hizalayacağımızı belirler.
- center: Dikeyde kusursuz şekilde ortalar.
gap (Boşluk): Elemanların arasına mesafe koyar. margin karmaşasından bizi kurtarır (Örn: gap: 15px;).

3. Pratik Uygulama: Blogger İçin Modern ve Esnek Menü Tasarımı

Blogger şablonlarında genellikle yan yana durması gereken popüler yayınlar kartları, sosyal medya butonları veya üst menüler için Flexbox biçilmiş kaftandır.

Gelin, saf HTML ve CSS ile esnek, responsive uyumlu bir üst menü barı tasarlayalım.

Kullanacağımız CSS Kodları:

/* Menünün ana çerçevesi (Kapsayıcı) */
.custom-nav {
display: flex;
justify-content: space-between; /* Logoyu sola, linkleri sağa yaslar */
align-items: center; /* Dikeyde hepsini tam ortalar */
background-color: #1a1a1a;
padding: 15px 25px;
border-radius: 8px;
}

/* Logo alanı */
.custom-nav .logo {
color: #ff6600; /* Koyu turuncu tonlarında dinamik bir renk */
font-weight: 800;
font-size: 20px;
}

/* Linklerin toplandığı liste (Kapsayıcı içinde ikinci bir esnek alan) */
.custom-nav ul {
display: flex;
gap: 20px; /* Linklerin arasına kusursuz 20px boşluk bırakır */
list-style: none;
margin: 0;
padding: 0;
}

/* Linklerin kendisi */
.custom-nav ul li a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}

/* Fareyle üzerine gelindiğinde */
.custom-nav ul li a:hover {
color: #ff6600;
}

Ders Sonu Ödevi

Kendi test blogunun "Yerleşim" (Layout) kısmından bir HTML/JavaScript bileşeni ekle ve içine şu ham yapıyı yaz:

<nav class='custom-nav'>
<div class='logo'>BloggerArşivim</div>
<ul>
<li><a href='#'>Ana Sayfa</a></li>
<li><a href='#'>CSS Dersleri</a></li>
<li><a href='#'>Hakkımızda</a></li>
</ul>
</nav>

Ardından yukarıdaki CSS kodlarını temanın CSS alanına ekle. display: flex ve justify-content: space-between sayesinde logonun ve menü elemanlarının nasıl ekrana kusursuzca yayıldığını gözlemle.

flexbox,css,ders