CSS Flexbox tam rehberi: 2026'da esnek layout ustaligi

CSS Flexbox, bir kapsayici icindeki ogeleri tek bir eksen boyunca hizalamak ve boslugu dagitmak icin tasarlanmis bir layout modelidir. Eskiden float, tablo ya da absolute positioning ile zorla cozulmeye calisilan pek cok sorunu daha temiz ve tutarli sekilde ele alir.

Flexbox; dikey ortalama, esit alan dagitimi, degisken boyutlu iceriklerin hizalanmasi ve responsive component tasarimi gibi isleri ciddi sekilde kolaylastirir. Bu nedenle modern frontend gelistirmede temel araclarindan biridir.

• Kolay merkezleme hem yatay hem dikey eksende
• Esnek boyut davranisi buyume, kuculme ve satir kirilmasi ile
• Daha anlasilir hizalama mantigi eksen bazli dusunce sayesinde

Okurken denemek istersen Flexbox playground aracimizi acabilirsin.

Her sey parent elemana display: flex vermekle baslar. Bunu yaptiginda dogrudan cocuklar otomatik olarak flex item olur.

Varsayilan durumda ogeler yatay olarak dizilir, alt satira gecmez, ana eksenin basina hizalanir ve capraz eksende uzar.

Deger	Ana eksen	Yon
row	Yatay	Soldan saga
row-reverse	Yatay	Sagdan sola
column	Dikey	Yukaridan asagi
column-reverse	Dikey	Asagidan yukari

flex-wrap satir kirilmasini kontrol eder. flex-flow ise direction ile wrap'i tek satirda birlestirir.

justify-content ana eksen boyunca, align-items ise capraz eksen boyunca hizalar.

Ozellik	Gorev
justify-content: center	Ana eksende ortalar
space-between	Ogeler arasindaki boslugu dagitir
align-items: center	Capraz eksende ortalar
align-items: stretch	Ogeleri capraz eksende uzatir

Birden fazla satir varsa align-content devreye girer. Ogeler arasinda temiz bosluk birakmak icin ise gap en kullanisli secenektir.

Bu ozellikler her bir ogenin alani nasil kullanacagini belirler.

• flex-grow: bos alan kalinca ne kadar buyuyecegi
• flex-shrink: alan yetmeyince ne kadar kuculecegi
• flex-basis: dagitimdan onceki temel boyut

flex bu uc degerin kisaltmasidir. flex: 1 esnek oge olusturur, flex: none boyutu sabitler, flex: 0 0 250px ise 250px'lik sabit bir oge tanimlar.

align-self tek bir ogenin hizasini ayri ayarlamaya yarar, order ise HTML'i degistirmeden gorsel sirayi degistirir.

Flexbox, gundelik arayuz kaliplarinda cok gucludur.

• Tam merkezleme: display: flex; justify-content: center; align-items: center;
• Navbar: justify-content: space-between logo ile menuyu ayirir
• Sticky footer: kolon wrapper + min-height: 100vh + ana icerikte flex: 1
• Son ogeyi saga itmek: margin-left: auto
• Sidebar + content: sabit sidebar ve esnek icerik alani

Bu kaliplari Flexbox playground uzerinde deneyebilirsin.

Kart listelerinde yaygin yaklasim, kapsayiciya display: flex; flex-wrap: wrap; gap: 24px;, kartlara ise flex: 1 1 300px; vermektir. Boylece kartlar minimum genisligi korurken ekrana gore yeniden yerlesir.

Holy grail layout, header, footer, yan kolonlar ve ana icerikten olusan klasik sayfa yapisidir. Dis wrapper dikey flex olur, orta alan ise yatay bir flex container haline gelir.

• Dis wrapper: display: flex; flex-direction: column; min-height: 100vh;
• Orta alan: display: flex; flex: 1;
• Sidebar: flex: 0 0 200px;
• Ana icerik: flex: 1;

Flexbox tek boyutlu layout'lar icin daha uygundur. CSS Grid ise satir ve sutunlari ayni anda kontrol etmek gereken iki boyutlu duzenlerde daha gucludur.

• Flexbox navbar, card, form ve component ici hizalamada cok iyidir
• Grid sayfa iskeleti ve karmasik grid yapilarinda daha gucludur

Konu	Flexbox	Grid
Boyut	1D	2D
Gucu	Hizalama ve dagitim	Yapi kurma
Tipik kullanim	Component icleri	Sayfa layout'u

Gercek projelerde en iyi sonuc genelde ikisini birlikte kullanmaktan gelir. Bunu Flexbox playground ve CSS Grid generator ile karsilastirabilirsin.

Flexbox kullanirken su hatalar sik gorulur:

• flex-shrink'in varsayilan olarak 1 oldugunu unutmak
• flex-basis yerine sadece width kullanmak
• Metin kisaltmasi icin min-width: 0 vermemek
• Karmasik 2D gridleri sadece Flexbox ile kurmaya calismak

Faydali ipuclari:

• margin-left: auto bir ogeyi karsi tarafa iter
• flex: 1 1 0% genelde daha dengeli alan dagitimi saglar
• Ici ice flex container'lar karmasik arayuzlerde cok ise yarar
• order sadece gorsel sirayi degistirir, erisilebilirlik okuma sirasi ayni kalir

Daha hizli pratik yapmak icin interactive Flexbox playground aracimizi kullanabilirsin.