Flexbox Nedir? Container & Item Mantığı

Bu Videoda Ne Öğreniyoruz?

Bir önceki derste display ve position ile elementlerin nasıl konumlandığını öğrendik. Bu bölümde modern frontend'in bel kemiği olan Flexbox'a başlıyoruz. Navbar yapmak, kartları yan yana dizmek, içeriği ortalamak — bunların hepsinde Flexbox kullanılıyor. Temeli sağlam atarak başlıyoruz.

Flexbox Nedir?

Flexbox, CSS'te tek boyutlu layout kurmak için kullanılan modern bir sistemdir. "Tek boyutlu" derken şunu kastediyoruz: Flexbox aynı anda yalnızca bir eksende çalışır — ya yatayda, ya dikeyde.

İki boyutlu, yani hem satır hem sütun aynı anda lazımsa CSS Grid devreye girer.

Araç Boyut Ne zaman? Flexbox Tek boyutlu Navbar, menü, buton grubu, kart listesi Grid İki boyutlu Dashboard, galeri, sayfa iskeleti

Eskiden bu tür düzenler için float ve inline-block kullanılırdı — karmaşık ve kırılgandı. Flexbox gelince her şey değişti. Bu yüzden modern frontend'in temel araçlarından biri.

Flexbox'ın parladığı yerler:

• Navbar ve menü hizalama

• Buton grupları

• Kart listeleri

• İkon + yazı yan yana hizalama

• İçeriği sayfanın tam ortasına alma

• Responsive düzenler

Flex Container ve Flex Item

Flexbox'ı anlamanın ilk adımı bu iki kavramı net bilmektir.

.container {
  display: flex;
}

Bu tek satır yazıldığında:

• .container → flex container olur

• İçindeki tüm doğrudan çocuklar → flex item olur

⚠️ Önemli: justify-content, align-items, flex-direction gibi flex özellikleri parent container'a yazılır, çocuğa değil. Bu en yaygın hata kaynaklarından biridir.

display: flex Yazınca Ne Değişir?

div elementleri normalde block elementtir ve alt alta dizilir. display: flex eklendiğinde çocuklar yan yana gelir.

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex; /* Bu tek satır çocukları yan yana dizer */
}

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 5px;
}

display: flex olmadan kutular alt alta dizilir. Bu tek satırla yan yana gelirler. Başka hiçbir şey yazmana gerek yok.

Sadece Doğrudan Çocuklar Flex Item Olur

Bu kural çok önemlidir ve sıkça karıştırılır.

<div class="container">
  <div class="wrapper">
    <div class="box">1</div>   <!-- flex item DEĞİL ❌ -->
  </div>
  <div class="box">2</div>     <!-- flex item ✅ -->
</div>

.container'ın doğrudan çocukları .wrapper ve ikinci .box'tır. İçerideki ilk .box, .wrapper'ın çocuğudur — .container'ın flex kurallarından etkilenmez.

Bir element düzgün hizalanmıyorsa ilk yapılacak kontrol: "Bu gerçekten flex container'ın doğrudan çocuğu mu?"

Özet

Kavram Açıklama display: flex Container'ı flex yapar, çocukları yan yana dizer Flex container display: flex verilen element Flex item Container'ın doğrudan çocukları Doğrudan çocuk kuralı Torun elementler flex item sayılmaz Özellikler nereye? Çoğu özellik parent container'a yazılır

Summary

This note covers the foundation of CSS Flexbox: what it is, when to use it over Grid, and the flex container / flex item relationship. Applying display: flex to a parent causes its direct children to line up horizontally. Most flex properties are applied to the parent, not the children. Only direct children become flex items — nested descendants are not affected. Part 6A of the KodlaKal CSS series.