C
Bölüm 4: Flexbox ile Modern Layout Tasarımı
Genel Bakış

Bölüm 4: Flexbox ile Modern Layout Tasarımı

furkanczay furkanczay
15 Haziran 2025
8 dk okuma süresi
css flexbox layout responsive
flexbox-modern-layout

Flexbox Nedir?

Flexbox (Flexible Box Layout), CSS’te tek boyutlu layout oluşturmak için tasarlanmış güçlü bir sistem. Flexbox ile öğeleri yatay veya dikey olarak kolayca hizalayabilir, alanları dinamik olarak dağıtabilir ve responsive tasarımlar oluşturabilirsiniz.

Flexbox’ın Avantajları

  • Kolay hizalama: Merkez hizalama artık basit
  • Esnek boyutlandırma: Öğeler otomatik olarak genişler/daralır
  • Sıralama kontrolü: HTML sırasını değiştirmeden görsel sıralama
  • Responsive: Farklı ekran boyutlarına uyum

Flexbox Temel Kavramları

Flex Container ve Flex Items

.flex-container {
    display: flex;           /* Flexbox aktif */
}
 
.flex-item {
    /* Container içindeki öğeler otomatik flex item olur */
}

HTML:

<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

Ana Eksen (Main Axis) ve Çapraz Eksen (Cross Axis)

     Main Axis →
  ┌─────────────────┐ ↑
  │ [1] [2] [3]     │ │ Cross
  └─────────────────┘ ↓ Axis

Container (Parent) Özellikleri

1. flex-direction

Öğelerin dizilim yönünü belirler:

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

2. flex-wrap

Öğelerin satıra sığmadığında ne yapacağını belirler:

.no-wrap { flex-wrap: nowrap; }    /* Varsayılan: sığdır */
.wrap { flex-wrap: wrap; }         /* Alt satıra geç */
.wrap-reverse { flex-wrap: wrap-reverse; } /* Ters sırada alt satıra */

3. flex-flow (Kısayol)

flex-direction ve flex-wrap’ın birleşimi:

.container {
    flex-flow: row wrap;           /* direction wrap */
    flex-flow: column nowrap;
}

4. justify-content (Ana Eksen Hizalaması)

.start { justify-content: flex-start; }     /* ← Başa hizala */
.end { justify-content: flex-end; }         /* → Sona hizala */
.center { justify-content: center; }        /* ● Ortala */
.between { justify-content: space-between; } /* |●●●| Aralarında boşluk */
.around { justify-content: space-around; }   /* ●●●● Etrafında boşluk */
.evenly { justify-content: space-evenly; }   /* ● ● ● Eşit boşluk */

5. align-items (Çapraz Eksen Hizalaması)

.stretch { align-items: stretch; }     /* Varsayılan: uzat */
.start { align-items: flex-start; }    /* Üste hizala */
.end { align-items: flex-end; }        /* Alta hizala */
.center { align-items: center; }       /* Ortaya hizala */
.baseline { align-items: baseline; }   /* Baseline'a hizala */

6. align-content (Çok Satırlı Hizalama)

Sadece flex-wrap: wrap olduğunda çalışır:

.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }

Item (Child) Özellikleri

1. flex-grow

Öğenin ne kadar genişleyeceğini belirler:

.item-1 { flex-grow: 1; }    /* 1 birim genişle */
.item-2 { flex-grow: 2; }    /* 2 birim genişle (2x daha fazla) */
.item-3 { flex-grow: 0; }    /* Genişleme (varsayılan) */

2. flex-shrink

Öğenin ne kadar küçüleceğini belirler:

.no-shrink { flex-shrink: 0; }   /* Küçülmesin */
.shrink { flex-shrink: 1; }      /* Varsayılan: küçülebilir */
.shrink-more { flex-shrink: 2; } /* Daha çok küçül */

3. flex-basis

Öğenin başlangıç boyutunu belirler:

.item {
    flex-basis: 200px;     /* 200px ile başla */
    flex-basis: 20%;       /* %20 ile başla */
    flex-basis: auto;      /* İçeriğe göre (varsayılan) */
}

4. flex (Kısayol)

flex-grow, flex-shrink, flex-basis’in birleşimi:

.item {
    flex: 1;               /* grow: 1, shrink: 1, basis: 0 */
    flex: 1 0 200px;       /* grow: 1, shrink: 0, basis: 200px */
    flex: none;            /* grow: 0, shrink: 0, basis: auto */
}

5. align-self

Tek bir öğenin çapraz eksen hizalamasını değiştirir:

.item-special {
    align-self: flex-start;   /* Bu öğe üstte */
    align-self: flex-end;     /* Bu öğe altta */
    align-self: center;       /* Bu öğe ortada */
}

6. order

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

.first { order: -1; }    /* En başa */
.last { order: 999; }    /* En sona */
.second { order: 2; }    /* İkinci sıraya */

Praktik Flexbox Örnekleri

1. Perfect Center (Mükemmel Ortalama)

.perfect-center {
    display: flex;
    justify-content: center;  /* Yatay ortala */
    align-items: center;      /* Dikey ortala */
    height: 100vh;            /* Tam sayfa yüksekliği */
}

HTML:

<div class="perfect-center">
    <div>Bu içerik tam ortada!</div>
</div>

2. Navigation Bar

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #333;
}
 
.navbar .logo {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}
 
.navbar .nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}
 
.navbar .nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.2s;
}
 
.navbar .nav-links a:hover {
    color: #007acc;
}
 
.navbar .auth-buttons {
    display: flex;
    gap: 1rem;
}
 
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
 
.btn-primary {
    background-color: #007acc;
    color: white;
}
 
.btn-outline {
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

HTML:

<nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
        <li><a href="#">Ana Sayfa</a></li>
        <li><a href="#">Hakkında</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
    <div class="auth-buttons">
        <button class="btn btn-outline">Giriş</button>
        <button class="btn btn-primary">Kayıt</button>
    </div>
</nav>

3. Card Layout

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
}
 
.card {
    flex: 1 1 300px;        /* Minimum 300px, esnek */
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
 
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
 
.card-title {
    margin: 0;
    color: #333;
}
 
.card-badge {
    background: #007acc;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}
 
.card-content {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}
 
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

4. Sidebar Layout

.layout {
    display: flex;
    min-height: 100vh;
    gap: 0;
}
 
.sidebar {
    flex: 0 0 250px;        /* Sabit 250px genişlik */
    background: #f5f5f5;
    padding: 2rem 1rem;
    border-right: 1px solid #ddd;
}
 
.main-content {
    flex: 1;                /* Kalan alanı kapla */
    padding: 2rem;
    background: white;
}
 
/* Responsive tasarım */
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    
    .sidebar {
        flex: none;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}

5. Equal Height Columns

.columns {
    display: flex;
    gap: 2rem;
    padding: 2rem;
}
 
.column {
    flex: 1;                /* Eşit genişlik */
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    
    /* İçerik farklı olsa da aynı yükseklik */
    display: flex;
    flex-direction: column;
}
 
.column-header {
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}
 
.column-content {
    flex: 1;               /* İçerik alanını genişlet */
}
 
.column-footer {
    margin-top: auto;      /* Footer'ı alta yapıştır */
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

Responsive Flexbox Patterns

1. Mobile-First Navigation

.mobile-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}
 
.nav-menu {
    display: none;         /* Mobilde gizli */
}
 
.menu-toggle {
    display: block;        /* Mobilde hamburger menü */
}
 
/* Desktop */
@media (min-width: 768px) {
    .nav-menu {
        display: flex;
        gap: 2rem;
    }
    
    .menu-toggle {
        display: none;
    }
}

2. Responsive Grid

.responsive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}
 
.grid-item {
    flex: 1 1 100%;        /* Mobilde tam genişlik */
    min-width: 0;          /* Flex shrink için gerekli */
}
 
/* Tablet */
@media (min-width: 768px) {
    .grid-item {
        flex: 1 1 calc(50% - 0.5rem);
    }
}
 
/* Desktop */
@media (min-width: 1024px) {
    .grid-item {
        flex: 1 1 calc(33.33% - 0.67rem);
    }
}

Flexbox Debugging

Görsel Debugging

/* Geliştirme sırasında kullanın */
.debug-flex {
    outline: 2px solid red;
}
 
.debug-flex > * {
    outline: 1px solid blue;
    background: rgba(0,0,255,0.1);
}

DevTools kullanımı

Browser geliştirici araçlarında:

  1. Flex container’ı seçin
  2. “Flexbox” simgesine tıklayın
  3. Ana/çapraz eksenleri ve öğe boyutlarını görün
Ipucu

DevTools İpucu: Chrome DevTools’ta flex container’ın yanında çıkan Flexbox simgesine tıklayarak layout’u görselleştirebilirsiniz.

Yaygın Flexbox Hataları

1. Flex Items Taşması

/* ❌ Problem */
.item {
    flex-basis: 300px;
    /* min-width otomatik olarak 300px olur */
}
 
/* ✅ Çözüm */
.item {
    flex-basis: 300px;
    min-width: 0;        /* Shrink edebilir */
}

2. Text Overflow

/* ❌ Problem */
.text-item {
    flex: 1;
    /* Uzun text taşabilir */
}
 
/* ✅ Çözüm */
.text-item {
    flex: 1;
    min-width: 0;        /* Gerekli */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Flexbox vs Diğer Layout Yöntemleri

Ne Zaman Flexbox Kullanmalı?

  • ✅ Tek boyutlu layout (satır veya sütun)
  • ✅ Öğe hizalama (özellikle merkez hizalama)
  • ✅ Eşit boy öğeler
  • ✅ Responsive navigation
  • ✅ Form layouts

Ne Zaman CSS Grid Kullanmalı?

  • ✅ İki boyutlu layout (satır VE sütun)
  • ✅ Kompleks grid yapıları
  • ✅ Sayfa düzeni (header, sidebar, main, footer)

Pratik Egzersizler

  1. Perfect center sayfası oluşturun
  2. Responsive navigation tasarlayın
  3. Card grid sistemi yapın
  4. Sticky footer layout oluşturun
  5. Equal height columns tasarlayın

En İyi Uygulamalar

  1. Mobile-first yaklaşım benimseyin
  2. Semantic HTML kullanın
  3. Gap property’sini margin yerine tercih edin
  4. DevTools’u debugging için kullanın
  5. Browser uyumluluğunu kontrol edin

Sıradaki Bölüm

Bir sonraki bölümde CSS Grid öğreneceksiniz. İki boyutlu layout tasarımında CSS Grid’in gücünü keşfedeceksiniz.

Öğrendikleriniz:

  • ✅ Flexbox temel kavramlarını
  • ✅ Container ve item özelliklerini
  • ✅ Pratik layout örneklerini
  • ✅ Responsive flexbox patterns
  • ✅ Debugging tekniklerini

Flexbox modern web tasarımının vazgeçilmez aracıdır! Bu bilgilerle artık kompleks layoutları kolayca oluşturabilirsiniz! 🚀