CSS Flexbox: Tam Rehber ve Pratik Örnekler

CSS Flexbox: Tam Rehber ve Pratik Örnekler

CSS Flexbox (Flexible Box Layout), tek boyutlu düzenleme sistemiyle web geliştirme dünyasını kökten değiştirdi. Float ve inline-block gibi eski yöntemlerin yetersiz kaldığı yerde Flexbox, elemanları yatay veya dikey eksende hizalamayı, dağıtmayı ve sıralamayı inanılmaz kolaylaştırır. Bu rehberde Flexbox'ın tüm özelliklerini pratik örneklerle derinlemesine inceleyeceğiz.

1. Flexbox Temelleri: Container ve Item

Flexbox sisteminde iki temel kavram vardır: flex container (ana eleman) ve flex item (çocuk elemanlar). Bir elemana display: flex veya display: inline-flex tanımladığınızda, o eleman bir flex container olur ve doğrudan çocukları otomatik olarak flex item haline gelir.

/* Temel Flex Container */
.container {
  display: flex;
  /* Varsayılan: flex-direction: row */
  /* Varsayılan: flex-wrap: nowrap */
  /* Varsayılan: justify-content: flex-start */
  /* Varsayılan: align-items: stretch */
}

/* Flex Item özellikleri */
.item {
  flex-grow: 0;    /* Varsayılan: büyümez */
  flex-shrink: 1;  /* Varsayılan: küçülebilir */
  flex-basis: auto; /* Varsayılan: içeriğe göre */
}

/* Kısa yazım (shorthand) */
.item-grow {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

.item-fixed {
  flex: 0 0 200px; /* Sabit 200px, büyümez, küçülmez */
}

2. Ana Eksen ve Çapraz Eksen Hizalama

Flexbox'ın en güçlü yanı, elemanları iki eksen üzerinde hassas şekilde konumlandırabilmesidir. justify-content ana eksende (main axis), align-items ise çapraz eksende (cross axis) hizalama yapar. Bu iki özelliğin kombinasyonu, neredeyse her türlü düzenlemeyi mümkün kılar.

/* Yatay ve Dikey Ortalama — en çok kullanılan pattern */
.center-everything {
  display: flex;
  justify-content: center; /* Yatay ortalama */
  align-items: center;     /* Dikey ortalama */
  min-height: 100vh;
}

/* Navbar düzeni: Logo solda, menü sağda */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

/* Eşit aralıklı elemanlar */
.card-grid {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Alt kısma yapıştırma (sticky footer pattern) */
.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-layout main {
  flex: 1; /* Kalan tüm alanı kapla */
}

.page-layout footer {
  flex-shrink: 0; /* Footer küçülmesin */
}

3. flex-wrap ve Responsive Tasarım

Varsayılan olarak flex item'lar tek satıra sığmaya çalışır ve gerekirse küçülür. flex-wrap: wrap ile item'ların bir sonraki satıra geçmesine izin verebilirsiniz. Bu özellik, media query kullanmadan responsive tasarım yapmanın en etkili yollarından biridir.

/* Responsive Card Layout — Media Query olmadan */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px; /* Min 300px, büyüyebilir, küçülebilir */
  padding: 1.5rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Holy Grail Layout */
.holy-grail {
  display: flex;
  flex-wrap: wrap;
}

.holy-grail header,
.holy-grail footer {
  flex: 1 1 100%; /* Tam genişlik */
}

.holy-grail nav {
  flex: 0 0 200px; /* Sabit sidebar */
  order: -1;       /* Sola taşı */
}

.holy-grail main {
  flex: 1;         /* Kalan alanı kapla */
  min-width: 0;    /* Taşmayı engelle */
}

.holy-grail aside {
  flex: 0 0 200px; /* Sabit sağ panel */
}

4. order ve align-self ile Bireysel Kontrol

Flex item'lar üzerinde bireysel kontrol sağlamak için order ve align-self özellikleri kullanılır. order ile HTML sıralamasını değiştirmeden görsel sırayı kontrol edebilir, align-self ile tek bir item'ın çapraz eksen hizalamasını override edebilirsiniz.

/* Dinamik sıralama */
.featured-card {
  order: -1; /* En başa taşı */
}

/* Bireysel hizalama */
.card-footer {
  align-self: flex-end; /* Sadece bu eleman alta yapışsın */
}

/* Pratik Örnek: Card içinde alt kısmı hizalama */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card .card-body {
  flex: 1; /* İçerik alanı esnesin */
}

.product-card .card-actions {
  margin-top: auto; /* Butonları otomatik olarak alta it */
  display: flex;
  gap: 0.5rem;
}

/* Responsive Order Değişimi */
@media (max-width: 768px) {
  .sidebar { order: 2; }
  .main-content { order: 1; }
  .header-nav { order: 0; }
}

5. Gerçek Dünya Örnekleri

Flexbox'ın gücünü en iyi gerçek projelerde görebilirsiniz. İşte sıkça karşılaşılan UI pattern'leri ve Flexbox çözümleri:

/* Input Group — Input + Button yan yana */
.input-group {
  display: flex;
}

.input-group input {
  flex: 1;
  border-right: none;
  border-radius: 4px 0 0 4px;
  padding: 0.75rem;
}

.input-group button {
  flex-shrink: 0;
  border-radius: 0 4px 4px 0;
  padding: 0.75rem 1.5rem;
}

/* Avatar + İsim + Badge */
.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-info .name {
  flex: 1;
  min-width: 0; /* Taşma kontrolü */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Masonry-benzeri düzen */
.masonry-flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  gap: 1rem;
}

.masonry-flex .item {
  width: calc(33.333% - 1rem);
}

Sonuç

CSS Flexbox, modern web geliştirmenin olmazsa olmaz araçlarından biridir. Container özellikleri (flex-direction, justify-content, align-items, flex-wrap, gap) ile genel düzeni kontrol eder, item özellikleri (flex-grow, flex-shrink, flex-basis, order, align-self) ile bireysel elemanları yönetirsiniz. Float ve clearfix gibi eski yöntemlere artık gerek kalmamıştır. Flexbox'ı öğrendikten sonra CSS Grid ile birlikte kullanarak neredeyse her türlü düzenlemeyi kolayca oluşturabilirsiniz. Pratik yaparak kas hafızanızı geliştirin — kısa sürede Flexbox düşüncesi doğal hale gelecektir.

Kaynaklar

• MDN: CSS Flexible Box Layout
• CSS-Tricks: A Complete Guide to Flexbox
• Flexbox Froggy — Oyunla Öğrenin
• web.dev: Flexbox