Flexbox nedir ve onunla içeriği nasıl ortalarsınız?

Question

Flexbox nedir ve onunla içeriği nasıl ortala​rsınız?

Accepted Answer

**Flexbox**, tek boyutlu bir düzen sistemidir — öğeleri tek bir **satırda** veya **sütunda** düzenler ve o çizgi boyunca alanı dağıtır. Float'lar ve hack'ler gerektiren hizalama ve boşluk sorunlarına modern bir yanıttır.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## İki eksen

Flexbox'ın **ana eksen** (öğelerin aktığı yön) ve **çapraz eksen** (dik) vardır. Özellikler bunlara eşlenir:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Mükemmel ortala​ma — ünlü kullanım durumu

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Bu üç satır, bir çocuğu hem yatay hem de dikey olarak ortalar — Flexbox'tan önce kötü ünlü olan bir görev.

## Yaygın desenler

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` seçenekleri `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly` içerir.

## Neden önemli

Flexbox, gezinti çubukları, düğme grupları, kart satırları, ortala​ma ve herhangi bir "öğe satırı" düzeni için günlük bir araçtır.

Ana eksen/çapraz eksen modelini anlamak (ve `flex-direction` değiştirdiğinizde `justify-content`/`align-items` anlamının değiştiği) ana zihinsel modeldir.

1B düzenler için Flexbox ve 2B için Grid kullanın.

İki eksen

Mükemmel ortala​ma — ünlü kullanım durumu

Yaygın desenler

Neden önemli

Mükemmel ortalama — ünlü kullanım durumu