Main Axis ve Cross Axis
Flexbox’ta iki eksen vardır. Bu eksenlerin yönü flex-direction’a göre değişir — sabit değil.
Bunu şöyle düşün: Flexbox’ın bir akış yönü var. flex-direction: row ile item’lar soldan sağa dizilir. Bu akış yönü = main axis. Bunun dik açısı = cross axis.
flex-direction: row (varsayılan)
Eksen | Yön |
|---|---|
Main axis | → Yatay |
Cross axis | ↕ Dikey |
flex-direction: column
Eksen | Yön |
|---|---|
Main axis | ↕ Dikey |
Cross axis | → Yatay |
justify-content→ her zaman main axis üzerinde çalışıralign-items→ her zaman cross axis üzerinde çalışır
Bu iki kural değişmez. flex-direction değişince eksenler de değişir, dolayısıyla aynı özellik farklı sonuç verir.
flex-direction
Akış yönünü ve main axis’i belirler.
.container { flex-direction: row; } /* → soldan sağa (varsayılan) */
.container { flex-direction: row-reverse; } /* ← sağdan sola */
.container { flex-direction: column; } /* ↓ yukarıdan aşağı */
.container { flex-direction: column-reverse; } /* ↑ aşağıdan yukarı */
row varsayılan değer — yazmasan da aktif. column yazılınca item’lar alt alta dizilir ama artık flex özellikleri devrededir. row-reverse ve column-reverse yalnızca görsel sırayı tersine çevirir, HTML sırası değişmez.
justify-content
Main axis üzerinde item’ların nasıl dağılacağını belirler.
justify-content: flex-start; /* [1][2][3]-------- başa yaslar (varsayılan) */
justify-content: center; /* ----[1][2][3]---- ortalar */
justify-content: flex-end; /* --------[1][2][3] sona yaslar */
justify-content: space-between; /* [1]-----[2]-----[3] ilk başa son sona, arası eşit */
justify-content: space-around; /* -[1]---[2]---[3]- her öğenin etrafına boşluk */
justify-content: space-evenly; /* --[1]--[2]--[3]-- tüm boşluklar tamamen eşit */
Değer | Ne yapar? |
|---|---|
| Ana eksenin başına yaslar |
| Ana eksenin sonuna yaslar |
| Ana eksende ortalar |
| İlk başa, son sona — arası eşit. Navbar’da çok kullanılır |
| Her öğenin etrafına boşluk — kenar boşlukları içtekinin yarısı |
| Kenarlar dahil tüm boşluklar tamamen eşit |
Özet
Özellik | Ne yapar? |
|---|---|
| Main axis yönünü belirler |
| Main axis hizalaması |
| Main axis yatay, cross axis dikey |
| Main axis dikey, cross axis yatay |
| Kenarlar dolu, arası eşit |
| Her boşluk tamamen eşit |
Sonraki Bölüm
Bölüm 6C → align-items, gap, flex-wrap, flex-grow/shrink/basis ve align-self Cross axis hizalaması ve esnek alan yönetimi. Bu bölümden sonra Flexbox’ın tüm araçlarını biliyor olacağız.
Summary
This note explains the axis system in CSS Flexbox. The main axis direction is controlled by flex-direction: with row it runs horizontally, with column vertically. justify-content always operates on the main axis and align-items on the cross axis — so changing flex-direction changes what each property actually does. All flex-direction and justify-content values are covered. Part 6B of the KodlaKal CSS series.
