CSS Flexbox Rehberi: Temel Kavramlar ve Örnekler

CSS Flexbox (Flexible Box Layout), tek boyutlu düzenler oluşturmak için tasarlanmış güçlü bir CSS modülüdür. Elemanları yatay veya dikey eksende hizalamak, aralarındaki boşlukları yönetmek ve farklı ekran boyutlarına uyum sağlamak için en etkili araçlardan biridir. Float ve inline-block gibi eski yöntemlerin aksine, Flexbox modern ve sezgisel bir yaklaşım sunar.

Flexbox Temelleri: Container ve Items

Flexbox sistemi iki temel kavram üzerine kuruludur:

• Flex Container: display: flex veya display: inline-flex tanımlanan üst eleman
• Flex Items: Container'ın doğrudan çocuk elemanları — otomatik olarak flex item olurlar

.container {
  display: flex;
}

/* Tüm doğrudan çocuklar artık flex item'dır */
.container > .item {
  /* flex item özellikleri burada */
}

Bir elemana display: flex uyguladığınızda, çocuk elemanlar varsayılan olarak yatay eksende (row) yan yana dizilir. Bu, Flexbox'ın varsayılan davranışıdır.

Ana Eksen ve Çapraz Eksen

Flexbox'ı anlamanın anahtarı iki eksen kavramıdır:

• Ana Eksen (Main Axis): flex-direction ile belirlenir. Varsayılan olarak yataydır (soldan sağa).
• Çapraz Eksen (Cross Axis): Ana eksene dik olan eksendir. Ana eksen yataysa, çapraz eksen dikeydir.

.container {
  flex-direction: row;            /* Varsayılan: soldan sağa */
  flex-direction: row-reverse;    /* Sağdan sola */
  flex-direction: column;         /* Yukarıdan aşağı */
  flex-direction: column-reverse; /* Aşağıdan yukarı */
}

justify-content: Ana Eksen Hizalama

justify-content özelliği, flex item'ları ana eksen boyunca hizalar. En sık kullanılan değerleri şunlardır:

.container {
  justify-content: flex-start;    /* Başlangıca hizala (varsayılan) */
  justify-content: flex-end;      /* Sona hizala */
  justify-content: center;        /* Ortala */
  justify-content: space-between; /* İlk ve son eleman kenarda, aralar eşit */
  justify-content: space-around;  /* Her elemanın etrafında eşit boşluk */
  justify-content: space-evenly;  /* Tüm boşluklar tamamen eşit */
}

space-between özellikle navigasyon çubukları için idealdir — logo sola, menü öğeleri sağa hizalanır.

align-items: Çapraz Eksen Hizalama

align-items özelliği, flex item'ları çapraz eksen boyunca hizalar:

.container {
  align-items: stretch;     /* Varsayılan: container yüksekliğini doldur */
  align-items: flex-start;  /* Üste hizala */
  align-items: flex-end;    /* Alta hizala */
  align-items: center;      /* Dikey ortala */
  align-items: baseline;    /* Metin taban çizgisine göre hizala */
}

Dikey ortalama CSS'in en yaygın sorunlarından biriydi. Flexbox ile tek satırda çözülür:

.perfect-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

flex-wrap: Satır Kaydırma

Varsayılan olarak tüm flex item'lar tek satıra sığdırılmaya çalışılır. flex-wrap ile elemanların bir sonraki satıra kaymasını sağlarsınız:

.container {
  flex-wrap: nowrap;       /* Varsayılan: tek satır */
  flex-wrap: wrap;         /* Sığmazsa alt satıra geç */
  flex-wrap: wrap-reverse; /* Sığmazsa üst satıra geç */
}

Kart tabanlı (card layout) düzenler için flex-wrap: wrap kullanımı şarttır. Böylece kartlar küçük ekranlarda alt alta dizilir.

gap: Elemanlar Arası Boşluk

Modern tarayıcılarda gap özelliği, flex item'lar arasındaki boşluğu tanımlar. Eskiden margin ile yapılan bu işlem artık çok daha temiz:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;         /* Tüm yönlerde 16px */
  gap: 16px 24px;    /* Satır arası 16px, sütun arası 24px */
}

gap kullanmanın avantajı, ilk ve son elemanlara gereksiz margin eklenmemesidir.

Flex Item Özellikleri

Her flex item kendi davranışını kontrol edebilir:

• flex-grow: Kalan boşluktan ne kadar pay alacağı (varsayılan: 0)
• flex-shrink: Alan daralırken ne kadar küçüleceği (varsayılan: 1)
• flex-basis: Başlangıç boyutu (varsayılan: auto)

.item {
  flex: 1;          /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
  flex: 0 0 300px;  /* Büyüme yok, küçülme yok, sabit 300px */
}

/* Kısayol: flex: grow shrink basis */

Pratik Örnek: Responsive Kart Düzeni

Flexbox ile responsive bir kart düzeni oluşturmak son derece kolaydır:

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px; /* En az 300px, kalan alanı paylaş */
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

Bu basit kodla, kartlar geniş ekranlarda yan yana, dar ekranlarda alt alta dizilir — herhangi bir media query yazmadan.

Flexbox Ne Zaman Kullanılmalı?

• Navigasyon çubukları ve menüler
• Form elemanlarını hizalama
• Kart listeleri ve galeri düzenleri
• Footer sütunları
• Dikey ve yatay ortalama
• Tek boyutlu (satır veya sütun) düzenler

İki boyutlu düzenler (hem satır hem sütun kontrolü) için CSS Grid daha uygun bir seçimdir. Çoğu projede Flexbox ve Grid birlikte kullanılır.