# Flexbox (CSS Esnek Kutu Yerleşimi)

Adres: https://softwaredictionary.org/tr/terimler/flexbox
Kategori: Web Geliştirme
Son güncelleme: 2026-09-30
Okunuşu: fleksboks

Kısaca: Flexbox, öğeleri tek bir satır ya da sütunda düzenleyen ve büyüme, küçülme, hizalama ile boş alanı paylaşma biçimlerini denetleyen bir CSS yerleşim modelidir.

## CSS'te Flexbox nedir?

CSS Flexible Box Layout'un kısaltması olan Flexbox, öğeleri aynı anda tek bir yönde, satır ya da sütun boyunca yerleştirmenin bir yoludur. Bir öğeyi `display: flex` ile flex kapsayıcısına (container) dönüştürürsünüz; doğrudan çocukları da yan yana dizilen ve alanı doldurmak için uzayıp kısalabilen flex öğeleri olur.

Flexbox iki eksen üzerinde çalışır. Ana eksen, varsayılan olarak satır olan `flex-direction`'ı izler ve `justify-content` öğelerin bu eksen boyunca nasıl aralıklanacağını belirler; çapraz eksen ona diktir ve `align-items` o yöndeki hizalamayı denetler. `gap` özelliği öğeler arasına boşluk ekler, `flex-wrap` öğelerin yeni satırlara geçmesine izin verir, bir öğedeki `flex: 1` gibi `flex` kısaltması ise kardeşlerine kıyasla ne kadar büyüyeceğini veya küçüleceğini belirler.

Ayarlanabilir kitap desteklerine sahip bir raftaki kitapları düşünün: hepsini sola yaslayabilir, ortalayabilir, eşit aralıkla dağıtabilir ya da bazı kitapların boşluğu doldurmak için genişlemesine izin verebilirsiniz. Flexbox; gezinme çubukları, araç çubukları, düğme grupları, kart satırları ve bir şeyi hem yatay hem dikey ortalamak gibi meşhur zor işler için gündelik bir araçtır ve tüm modern tarayıcılar onu destekler.

Flexbox çoğunlukla CSS Grid ile karşılaştırılır. Flexbox tek boyutludur ve öğeleri içeriklerinden dışa doğru boyutlandırır; bu, öğelerin bir çizgi boyunca aktığı bileşenlere uygundur. Grid ise iki boyutludur ve satır ile sütunları aynı anda denetler; bu da sayfa yerleşimleri ve galeriler için uygundur. Çoğu modern site ikisini de kullanır; genellikle genel sayfa yapısı için Grid, tek tek bileşenlerin içinde Flexbox.

## Önemli noktalar

- `display: flex` bir öğeyi flex kapsayıcısı, çocuklarını flex öğesi yapar.
- Flexbox öğeleri tek boyutta, satır veya sütun olarak yerleştirir.
- `justify-content` öğeleri ana eksende, `align-items` çapraz eksende hizalar.
- `gap`, `flex-wrap` ve `flex` boşluğu, satır kaydırmayı ve büyümeyi denetler.
- Bileşenler için Flexbox, iki boyutlu yerleşimler için CSS Grid kullanın.

## Örnek: Flexbox ile bir gezinme çubuğu ve mükemmel ortalama

```css
/* A navigation bar: logo on the left, links on the right */
.navbar {
  display: flex;
  justify-content: space-between; /* main axis (horizontal) */
  align-items: center;            /* cross axis (vertical) */
  gap: 1rem;
}

/* Center anything horizontally and vertically */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
```

## Sık sorulan sorular

**Flexbox ile CSS Grid arasındaki fark nedir?**

Flexbox öğeleri tek bir satır veya sütunda düzenler ve gezinme çubukları gibi bileşenler için idealdir. CSS Grid ise satır ve sütunları aynı anda denetler; bu da onu sayfa yerleşimleri ve galeriler için daha iyi kılar. İkisi çoğunlukla birlikte kullanılır.

**Flexbox ile bir div nasıl ortalanır?**

Üst öğeye `display: flex`, `justify-content: center` ve `align-items: center` verin. Üst öğe çocuktan daha yüksek olduğu sürece çocuk hem yatay hem dikey olarak ortalanır.

**flex: 1 ne anlama gelir?**

`flex: 1`, bir öğenin boş alanı doldurmak için büyümesine ve gerekirse küçülmesine izin veren, başlangıç boyutunu sıfıra ayarlayan bir kısaltmadır. Sonuç olarak `flex: 1` olan tüm öğeler kullanılabilir alanı eşit paylaşır.

---

Software Dictionary: https://softwaredictionary.org/tr · https://softwaredictionary.org/tr/llms.txt