CSS3 · Gün 2

Flexbox, tek boyutlu layout (yatay ya da dikey) için tasarlanmış modern bir CSS modülüdür. Eski “float / clearfix” karmaşasının yerini çoktan aldı. Hizalama, dağıtım ve sıralama işlemleri Flexbox’la birkaç satıra iniyor.

1. Flex Container ve Item

Bir elementi display: flex yaptığında, doğrudan çocukları flex item olur. Sonsuz nested değil — sadece direkt çocuklar.

.container {
    display: flex;
}

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

Varsayılan olarak item’lar yatay sıralanır.

2. Main Axis ve Cross Axis

Flexbox’ta her zaman iki eksen vardır:

Main axis — Ana yön (varsayılan: yatay, soldan sağa)
Cross axis — Çapraz yön (varsayılan: dikey, yukarıdan aşağıya)

       cross axis
            ↑
            │
main axis ──→  [item] [item] [item]
            │
            ↓

flex-direction

Ana yönü değiştirir:

.container { flex-direction: row; }         /* varsayılan: → */
.container { flex-direction: row-reverse; } /* ← */
.container { flex-direction: column; }      /* ↓ */
.container { flex-direction: column-reverse; } /* ↑ */

column yaparsan main axis dikey olur — justify-content artık dikey hizalama yapar.

3. Hizalama: justify-content & align-items

justify-content — Main Axis Hizalama

.container { justify-content: flex-start; }    /* başa yasla (varsayılan) */
.container { justify-content: flex-end; }      /* sona yasla */
.container { justify-content: center; }        /* ortala */
.container { justify-content: space-between; } /* aralarda eşit boşluk */
.container { justify-content: space-around; }  /* etraflarında eşit */
.container { justify-content: space-evenly; }  /* tüm boşluklar eşit */

align-items — Cross Axis Hizalama

.container { align-items: stretch; }     /* esnet (varsayılan) */
.container { align-items: flex-start; }
.container { align-items: flex-end; }
.container { align-items: center; }
.container { align-items: baseline; }    /* metin baseline'ları hizalı */

Pratik: Mükemmel Ortalama

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

Eski yöntemlerle karın ağrıtan “div’i ortalama” problemi artık 3 satırda.

4. Sarma (Wrapping)

Varsayılan olarak item’lar tek satırda kalır ve sığmazlarsa sıkışırlar.

.container { flex-wrap: nowrap; }   /* varsayılan */
.container { flex-wrap: wrap; }     /* alta sar */
.container { flex-wrap: wrap-reverse; }

gap

Item’lar arasındaki boşluk için gap kullan — margin numarasından çok daha temiz:

.container {
    display: flex;
    gap: 16px;          /* satır + sütun */
    gap: 16px 24px;     /* satır | sütun */
}

5. Item Özellikleri

flex-grow, flex-shrink, flex-basis

Her item kendi davranışını ayarlayabilir:

flex-basis — Başlangıç boyutu (genişlik veya yükseklik)
flex-grow — Boş alan paylaşımı (0 = büyüme, 1 = büyür)
flex-shrink — Daralma faktörü (0 = daralmaz, 1 = daralır)

.item {
    flex-basis: 200px;
    flex-grow: 1;
    flex-shrink: 1;
}

Shorthand: flex

.item { flex: 1; }              /* = flex: 1 1 0 */
.item { flex: 0 0 200px; }       /* sabit 200px */
.item { flex: 2; }              /* 2 birim büyür */

align-self

Bir item kendine özel cross axis hizalama yapabilir:

.special-item {
    align-self: flex-start;  /* container'ın align-items'ını override eder */
}

order

Sıralamayı CSS’ten değiştirebilirsin:

.first  { order: -1; }   /* en başa */
.last   { order: 1; }    /* sona */

Erişilebilirlik notu: order sadece görsel sıralamayı değiştirir, DOM sırası aynı kalır. Screen reader DOM sırasını okur, klavye navigasyonu da. Anlamlı sıralama bozmadan kullan.

6. Responsive Flex Desenleri

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.nav-links {
    display: flex;
    gap: 8px;
}

Otomatik Sarılan Kart Grid’i

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

.card {
    flex: 1 1 280px;  /* min 280px, fazla alan varsa büyür */
}

Kart sayısı ve viewport genişliğine göre otomatik 1/2/3/4 kolon olur.

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }  /* tüm boş alanı yutar, footer alta itilir */

Mini Proje: Kart Galerisi

<div class="gallery">
    <div class="card">
        <h3>Kart 1</h3>
        <p>Açıklama...</p>
    </div>
    <div class="card">
        <h3>Kart 2</h3>
        <p>Açıklama...</p>
    </div>
    <div class="card">
        <h3>Kart 3</h3>
        <p>Açıklama...</p>
    </div>
</div>

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px;
}

.card {
    flex: 1 1 280px;
    padding: 20px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s, border-color 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    border-color: #a6e22e;
}

Bu galeri:

Geniş ekranda kartlar yan yana (1280px+‘da 4-5 kolon)
Tabletlerde 2 kolon
Telefonlarda 1 kolon
Hiç media query yok!

Pratik Sorular

Soru 1: Bir butonu sayfanın tam ortasına koymak için en kısa CSS?

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

Soru 2: Üç kart yan yana, ortadaki iki kat geniş olsun?

.cards { display: flex; gap: 16px; }
.card { flex: 1; }
.card.featured { flex: 2; }

Soru 3: space-between ile aynı görselin padding+gap ile yazımı?

/* space-between: */
.bar { display: flex; justify-content: space-between; }

/* padding + gap eşdeğeri: */
.bar { display: flex; gap: auto; }  /* DOES NOT WORK */
/* Aslında space-between'ın eşdeğeri yok — margin: auto numaraları
   ile yapılabilir ama space-between en temiz çözüm */

Günün Özeti

Bugün modern CSS layout’un en temel aracını öğrendik:

Flex container ve flex item kavramları
Main axis ve cross axis modeli
justify-content ve align-items ile hizalama
flex-grow, flex-shrink, flex-basis ile esneklik
gap ile aralık yönetimi
Responsive desenler (auto-wrapping galeri, sticky footer)

Yarın Gün 3’te CSS Grid’e geçiyoruz — iki boyutlu layout için biçilmiş kaftan.

👣 Layout — Flexbox