CSS Flexbox ile Hizalama ve Düzen

CSS Flexbox, tek boyutlu düzenleri (bir satır ya da bir sütun) zahmetsizce hizalamak ve dağıtmak için tasarlanmış güçlü bir CSS düzen modülüdür. Eski float ve inline-block hilelerinin aksine, Flexbox öğeleri bir eksen boyunca dizer, kalan boşluğu mantıklı biçimde paylaştırır ve dikey ortalamayı tek satırda çözer. Bu rehberde Flexbox'ın temel özelliklerini doğru söz dizimiyle, gerçek örneklerle ve günlük hayatta sık karşılaşılan düzen kalıplarıyla adım adım öğreneceksin.

Flex konteyneri ve eksen kavramı

Her şey bir öğeye display: flex vermekle başlar. Bu öğe artık bir flex konteyneri, doğrudan çocukları ise flex öğeleri olur. Flexbox'ı anlamak için iki ekseni kavramak şarttır:

Ana eksen (main axis): flex-direction ile belirlenir. Varsayılan row'da soldan sağa uzanır.
Çapraz eksen (cross axis): Ana eksene diktir. row düzeninde yukarıdan aşağıya gider.

Bu ayrım kritiktir: justify-content her zaman ana eksen boyunca, align-items ise her zaman çapraz eksen boyunca çalışır. flex-direction'ı değiştirdiğinde bu iki özelliğin yönü de yer değiştirir.

.konteyner {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

Ana eksende dağıtım: justify-content

justify-content öğeleri ana eksen boyunca dağıtır ve aralarındaki boşluğu yönetir. En çok kullanılan değerler şunlardır:

flex-start — öğeleri başa toplar (varsayılan).
center — öğeleri ortalar.
flex-end — öğeleri sona toplar.
space-between — ilk ve son öğe kenarlara yapışır, kalan boşluk aralara eşit dağılır.
space-around — her öğenin iki yanına eşit boşluk verir.
space-evenly — tüm boşluklar (kenarlar dahil) birbirine eşittir.

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

Çapraz eksende hizalama: align-items ve align-self

align-items tüm öğeleri çapraz eksen boyunca hizalar. stretch (varsayılan) öğeleri konteynerin yüksekliğine doldururken, center dikeyde ortalar — bu, yıllarca uğraştıran "dikey ortalama" sorununun en temiz çözümüdür.

stretch — öğeleri çapraz eksende esnetir (varsayılan).
flex-start / flex-end — başa ya da sona hizalar.
center — çapraz eksende ortalar.
baseline — metin temel çizgilerini hizalar.

Tek bir öğeyi diğerlerinden farklı hizalamak istersen, o öğeye align-self uygula; bu, yalnızca o öğe için align-items'ı geçersiz kılar.

.kart {
  align-self: flex-end; /* yalnızca bu öğe sona hizalanır */
}

Sarma ve boşluk: flex-wrap ve gap

Varsayılan olarak flex öğeleri tek bir satırda kalır ve sığmazsa küçülür. flex-wrap: wrap ile öğelerin alt satıra geçmesine izin verirsin — bu, duyarlı kart dizileri için temeldir. Öğeler arasına boşluk koymak için artık margin hilelerine gerek yok; modern çözüm gap özelliğidir.

.kart-dizisi {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* hem satırlar hem sütunlar arası boşluk */
}

gap yalnızca öğeler arasına boşluk koyar, dış kenarlara koymaz; bu yüzden eski margin tabanlı yöntemlerden çok daha öngörülebilirdir.

Esneklik: flex-grow, flex-shrink, flex-basis ve flex kısayolu

Flexbox'ın asıl gücü, kalan alanı öğeler arasında nasıl paylaştırdığında ortaya çıkar. Bunu üç özellik yönetir:

flex-grow — kalan boşluğu doldurmak için öğenin ne kadar büyüyeceğini belirler (varsayılan 0).
flex-shrink — yer daraldığında öğenin ne kadar küçüleceğini belirler (varsayılan 1).
flex-basis — büyüme/küçülme öncesi başlangıç boyutudur (varsayılan auto).

Bu üçünü tek satırda yazmak için flex kısayolu kullanılır. Çok yaygın kalıplar şunlardır:

.oge {
  flex: 1; /* flex: 1 1 0 — tüm öğeler eşit genişlikte */
}

.sabit-kenar {
  flex: 0 0 240px; /* büyümez, küçülmez: sabit 240px sütun */
}

.esnek-icerik {
  flex: 1 1 300px; /* 300px'ten başla, alan varsa büyü, gerekirse küçül */
}

flex: 1 tüm çocuklara verildiğinde, hepsi kalan alanı eşit paylaşır — bu, eşit sütunlu düzenlerin en kısa yoludur.

Sıralama: order

order özelliği, öğelerin HTML'deki sırasını değiştirmeden görsel olarak yeniden sıralamanı sağlar. Varsayılan değer 0'dır; daha düşük değerler öne, daha yüksek değerler sona geçer.

.one-cikan {
  order: -1; /* HTML'de nerede olursa olsun en başa geçer */
}

Erişilebilirlik notu: order yalnızca görseli değiştirir, klavye ve ekran okuyucu sırası HTML kaynağına bağlı kalır. Bu yüzden mantıksal okuma sırasını bozacak şekilde aşırı kullanma.

Pratik kalıp: ekranda mükemmel ortalama

Bir öğeyi hem yatay hem dikey ortalamak Flexbox ile tek bloktur:

.merkez {
  display: flex;
  justify-content: center; /* ana eksen: yatay */
  align-items: center;     /* çapraz eksen: dikey */
  min-height: 100vh;
}

Bir kart dizisi içinse flex-wrap ve flex-basis'i birleştirmek, ekran genişledikçe sütun sayısının doğal olarak artmasını sağlar — medya sorgusu yazmadan duyarlı bir ızgara elde edersin.

Sık Sorulan Sorular

Flexbox mı Grid mi kullanmalıyım?

Genel kural: tek boyutlu düzenler (bir satır ya da bir sütun, navbar, buton grubu, kart dizisi) için Flexbox; iki boyutlu düzenler (satır ve sütunu birlikte hizalamak, sayfa şablonu) için CSS Grid kullan. İkisi birbirinin rakibi değil, tamamlayıcısıdır; çoğu sayfada iç içe kullanılırlar.

justify-content ile align-items'i nasıl ayırt ederim?

justify-content her zaman ana eksen (varsayılan yatay), align-items ise her zaman çapraz eksen (varsayılan dikey) boyunca çalışır. flex-direction: column verirsen bu yönler yer değiştirir, çünkü ana eksen artık dikeydir.

Öğeler arasına boşluğu nasıl koymalıyım?

Modern tarayıcılarda en temiz yöntem gap özelliğidir. margin hileleri yerine konteynere gap: 1rem ver; bu yalnızca öğelerin arasına boşluk koyar ve dış kenarları temiz bırakır.

Düzen sorunlarını kalıcı olarak çözmek mi istiyorsun? Flexbox ve Grid'i doğru birleştiren, hızlı ve duyarlı bir arayüz için birlikte çalışalım. Benimle iletişime geç ve projeni konuşalım.