CSS Flexbox (Flexible Box Layout), modern web tasarımında esnek ve dinamik düzenler oluşturmak için kullanılan güçlü bir layout sistemidir. Özellikle responsive (duyarlı) tasarımlarda, dikey-yatay ortalama işlemlerinde ve karmaşık hizalama senaryolarında büyük kolaylık sağlar.

Bu rehberde Flexbox’ın temel mantığını, görseldeki tüm başlıkları ve profesyonel kullanım detaylarını bir araya getirerek kapsamlı şekilde açıklıyoruz.

1️⃣ Flex Container & Flex Items

Flex Kapsayıcı ve Öğeler

display: flex;

Bir HTML elemanına display: flex; özelliği verildiğinde:

• O eleman Flex Container olur.
• İçindeki doğrudan çocuk elemanlar Flex Item haline gelir.

Flexbox iki temel eksen üzerinden çalışır:

🔹 Main Axis (Ana Eksen)

Öğelerin dizildiği ana yön.

🔹 Cross Axis (Çapraz Eksen)

Ana eksene dik olan yön.

Varsayılan Durum:

• Main Axis → Yatay (soldan sağa)
• Cross Axis → Dikey (yukarıdan aşağıya)

Bu eksen mantığını anlamak Flexbox kullanımının temelidir.

2️⃣ flex-direction

Ana eksenin yönünü belirler

flex-direction: row;          /* default */
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;

Seçenekler:

• row (varsayılan) → Öğeler yatay dizilir.
• column → Öğeler dikey dizilir.
• row-reverse → Yatay ama ters yönde.
• column-reverse → Dikey ama ters yönde.

📌 Profesyonel Kullanım:

• Navbar → row
• Mobil liste tasarımı → column
• Ters sıralama gereken durumlar → *-reverse

3️⃣ flex-wrap

Öğelerin tek satırda mı kalacağını belirler

flex-wrap: nowrap;   /* default */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

Seçenekler:

• nowrap (varsayılan) → Öğeler tek satırda kalır.
• wrap → Taşarsa alt satıra geçer.
• wrap-reverse → Taşma ters yönde olur.

📌 Responsive kart sistemlerinde genellikle:

flex-wrap: wrap;

Bu sayede ekran küçüldükçe öğeler otomatik olarak alt satıra iner.

4️⃣ justify-content

Öğeleri ana eksende hizalar

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Seçenekler:

• flex-start → Başlangıca hizalar
• center → Ortalar
• flex-end → Sona hizalar
• space-between → Aralara eşit boşluk koyar
• space-around → Öğelerin etrafına boşluk bırakır
• space-evenly → Tüm boşlukları eşit dağıtır

📌 Kullanım Alanları:

• Menü hizalama
• Buton grupları
• Navbar düzenleri
• Kartlar arası boşluk kontrolü

5️⃣ align-items

Öğeleri çapraz eksende hizalar

align-items: stretch;   /* default */
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;

Seçenekler:

• stretch (varsayılan) → Öğeleri esnetir.
• flex-start → Üste hizalar.
• center → Dikey ortalar.
• flex-end → Alta hizalar.
• baseline → Metin hizasına göre hizalar.

📌 En sık kullanılan kombinasyon:

display: flex;
justify-content: center;
align-items: center;

Bu kullanım bir elementi hem yatay hem dikey ortalar.

6️⃣ Flex Shorthand (Öğeler İçin)

flex: flex-grow flex-shrink flex-basis;

Kısa kullanım:

flex: 1;
flex: 2;

Açıklama:

• flex-grow → Boş alanı büyüme oranı
• flex-shrink → Daralma oranı
• flex-basis → Başlangıç boyutu

Örnek:

.item1 { flex: 1; }
.item2 { flex: 2; }
.item3 { flex: 1; }

Bu durumda:

• Item2 diğerlerinden 2 kat daha fazla alan kaplar.

📌 Dashboard ve admin panel tasarımlarında alan dağılımı için idealdir.

Gerçek Dünya Örneği

<div class="container">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  height: 300px;
  background: #f5f5f5;
}

.box {
  flex: 1;
  margin: 10px;
  padding: 20px;
  background: steelblue;
  color: white;
  text-align: center;
}

Flexbox vs Eski Yöntemler

Flexbox Neden Profesyonel Geliştiriciler İçin Önemlidir?

✔ Responsive tasarımın temelidir
✔ UI/UX tasarımında büyük kolaylık sağlar
✔ Daha temiz ve sürdürülebilir CSS sunar
✔ Grid ile birlikte güçlü layout sistemleri oluşturur
✔ Karmaşık hizalama problemlerini basitleştirir

Sonuç

CSS Flexbox, modern web geliştirme sürecinin vazgeçilmez layout sistemlerinden biridir. Özellikle:

• Kart sistemleri
• Admin paneller
• E-ticaret ürün gridleri
• Navbar ve menü yapıları
• Mobil uyumlu arayüzler

gibi yapılarda yüksek esneklik sağlar.

Flexbox öğrenmek, profesyonel frontend geliştirme için temel bir gerekliliktir.