Flexbox (Flexible Box Layout), tek boyutlu (1D) düzenler (satır veya sütun) oluşturmak için kullanılan bir CSS layout modelidir.
Özellikle responsive (duyarlı) tasarım için oldukça uygundur.

FLEX CONTAINER

Bir elementi flex konteyner yapmak için:

display: flex;

Bu özellik verildiğinde, içindeki öğeler flex item olur.

Ana Kavramlar

Main Axis (Ana Eksen)

Varsayılan olarak yataydır.

flex-direction: row; /* default */

Cross Axis (Çapraz Eksen)

Ana eksene dik olan eksendir.

⚠️ Eğer flex-direction: column; yapılırsa eksenler yer değiştirir.

CONTAINER PROPERTIES (Konteyner Özellikleri)

1. display

display: flex;

Flex bağlamını aktif eder.

2. flex-direction

Ana eksenin yönünü belirler.

flex-direction: row;          /* varsayılan */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

İçerik akışını kontrol eder.

3. flex-wrap

Öğelerin tek satır mı çok satır mı olacağını belirler.

flex-wrap: nowrap;       /* varsayılan */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

• nowrap → Tek satır
• wrap → Taşarsa alt satıra geçer

4. justify-content

Main Axis boyunca hizalama yapar.

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

5. align-items

Cross Axis boyunca hizalama (tek satır için).

align-items: stretch;  /* varsayılan */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

Varsayılan değer: stretch

6. align-content

Çoklu satırlarda (wrap kullanıldığında) cross axis hizalama yapar.

align-content: flex-start;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch;

⚠️ Sadece flex-wrap: wrap kullanıldığında çalışır.

ITEM PROPERTIES (Öğe Özellikleri)

1. order

Öğelerin görsel sırasını değiştirir.

order: 0; /* varsayılan */

2. flex-grow

Boş alanı paylaşma oranını belirler.

flex-grow: 0; /* varsayılan */

3. flex-shrink

Taşma durumunda küçülme oranını belirler.

flex-shrink: 1; /* varsayılan */

4. flex-basis

Başlangıç boyutunu belirler.

flex-basis: auto; /* default */
flex-basis: 200px;

5. flex (shorthand)

flex: grow shrink basis;

Örnek:

flex: 1 1 auto;
flex: 1;

6. align-self

Tek bir öğe için align-items özelliğini override eder.

align-self: center;

ÖNEMLİ NOT

Flexbox kullanırken her zaman:

Önce display: flex yaz!
Eksen mantığıyla düşün (sağ-sol değil, main/cross axis düşün).

PROFESYONEL FLEXBOX REHBERİ (Geliştirilmiş Anlatım)

Flexbox Ne Zaman Kullanılır?

Flexbox şu durumlarda idealdir:

• Navbar oluşturma
• Kart düzenleri
• Buton hizalama
• Form elemanlarını ortalama
• Dikey + yatay ortalama
• Responsive layout

Flexbox vs Grid

Flexbox	Grid
1 boyutlu	2 boyutlu
Satır veya sütun	Satır + sütun
İçerik odaklı	Layout odaklı

Profesyonel Kullanım Örneği

Responsive Navbar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Ortalanmış İçerik (En Çok Sorulan)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Flexbox’ın Avantajları

✔ Daha az kod
✔ Daha az float kullanımı
✔ Responsive dostu
✔ Dikey hizalama kolay
✔ Modern tarayıcı desteği yüksek

En Sık Yapılan Hatalar

1. display: flex yazmayı unutmak
2. align-content ile align-items karıştırmak
3. Eksen mantığını anlamadan hizalama yapmak
4. flex-basis yerine width kullanmak

İleri Seviye Bilgiler

1. Flex Shorthand Stratejisi

flex: 1;         /* flex: 1 1 0 */
flex: auto;      /* 1 1 auto */
flex: none;      /* 0 0 auto */

2. Auto Margin Tekniği

Bir öğeyi sağa yaslamak için:

margin-left: auto;

Bu yöntem genellikle navbar tasarımında kullanılır.

SONUÇ

Flexbox:

• Modern web tasarımının temelidir.
• 1 boyutlu layout problemlerini çözer.
• Responsive tasarımda vazgeçilmezdir.
• Dikey ortalamayı basitleştirir.