Çalıştırılabilir CSS Dokümanları: CSS flexbox

Q: flex: 1 ne anlama gelir?

flex: 1, flex: 1 1 0%'nin kısaltmasıdır: öğe büyüyebilir (flex-grow: 1), küçülebilir (flex-shrink: 1) ve sıfır boyuttan başlar (flex-basis: 0%). Hepsi flex: 1 olan öğeler boş alanı eşit paylaşır, bu yüzden içerikleri sığmıyor olmadıkça aynı genişlikte olurlar.

Q: justify-content ile align-items arasındaki fark nedir?

justify-content öğeleri ana eksen boyunca (bir satırda yatayda), align-items ise çapraz eksen boyunca (bir satırda dikeyde) yerleştirir. flex-direction: column ile iki eksen yer değiştirir, böylece justify-content dikey olur.

Q: Flex öğem neden kapsayıcısından taşıyor?

Bir flex öğesinin varsayılan olarak min-width: auto değeri vardır, bu yüzden en uzun kelimesinin ya da en geniş çocuğunun genişliğinin altına küçülmeyi reddeder. Küçülebilmesi için öğeye min-width: 0 (ya da overflow: hidden) ver, örneğin text-overflow: ellipsis'in çalışması için.

Q: Flexbox span gibi satır içi elementlerde çalışır mı?

Evet. display: flex verilen her element bir flex kapsayıcıdır ve çocukları kendi display değerleri ne olursa olsun flex öğesi olur; böylece çocuklar satır içi olmaktan çıkar ve bloklar gibi genişlik, yükseklik ve margin kabul eder.

display: flex ne yapar

Bir ebeveyne display: flex ver, doğrudan çocukları bir satırda yan yana dizilir ve aynı yüksekliğe esner. Bu tek bildirim, bir şey satırını dizmek için float'ların, inline-block'un ve çoğu konumlandırma hilesinin yerini alır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>display flex</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { background: #e5e7eb; padding: 8px; margin-bottom: 12px; }
    .flex { display: flex; gap: 8px; }
    .item { background: #2563eb; color: white; padding: 10px 14px; }
    .tall { padding-block: 24px; }
  </style>
</head>
<body>
  <p>Without flex (normal block layout):</p>
  <div class="box">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
  <p>With display: flex:</p>
  <div class="box flex">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

İlk kutuda her div tam bir satır kaplıyor. İkincisinde üç öğe tek bir satırda duruyor, her biri yalnızca içeriği kadar geniş, ve One ile Three, Two'nun yüksekliğine esniyor. Yalnızca ebeveyn değişti: display: flex her zaman öğelere değil kapsayıcıya verilir.

Flexbox oyun alanı

Değerleri seç ve öğelerin hareket etmesini izle. Kutunun altındaki kod satırı gördüğün şeyin CSS'i, onun altındaki liste ise tarayıcının her öğeyi gerçekte nereye yerleştirdiği; getBoundingClientRect() ile ölçülüyor.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
    #box { display: flex; height: 170px; background: #e5e7eb; border: 2px solid #111827; }
    .item { background: #2563eb; color: white; width: 60px; padding: 8px; box-sizing: border-box; }
    .item:nth-child(2) { background: #16a34a; height: 80px; }
    .item:nth-child(3) { background: #f59e0b; height: 50px; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>flex-direction <select data-p="flex-direction"><option>row</option><option>row-reverse</option><option>column</option><option>column-reverse</option></select></label>
    <label>justify-content <select data-p="justify-content"><option>flex-start</option><option>center</option><option>flex-end</option><option>space-between</option><option>space-around</option><option>space-evenly</option></select></label>
    <label>align-items <select data-p="align-items"><option>stretch</option><option>flex-start</option><option>center</option><option>flex-end</option><option>baseline</option></select></label>
    <label>gap <select data-p="gap"><option>0px</option><option>8px</option><option>24px</option></select></label>
  </div>
  <div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <pre id="out"></pre>
  <script>
    const box = document.getElementById('box');
    const selects = document.querySelectorAll('select');
    const update = () => {
      const css = [];
      selects.forEach((s) => { box.style.setProperty(s.dataset.p, s.value); css.push(s.dataset.p + ': ' + s.value + ';'); });
      const b = box.getBoundingClientRect();
      const places = [...box.children].map((el) => {
        const r = el.getBoundingClientRect();
        return el.textContent + ': x ' + Math.round(r.left - b.left - 2) + ', y ' + Math.round(r.top - b.top - 2) + ', ' + Math.round(r.width) + ' x ' + Math.round(r.height);
      });
      document.getElementById('out').textContent = '.box { display: flex; ' + css.join(' ') + ' }\n' + places.join('\n');
    };
    selects.forEach((s) => s.addEventListener('change', update));
    update();
  </script>
</body>
</html>

Denenecek şeyler:

justify-content: space-between: öğe 1 x 0'a yerleşir ve öğe 3 uzak kenara değer.
align-items: center: üç öğe kendi yüksekliklerini korur ve merkezleri hizalanır. Varsayılan stretch ile öğe 1'in kendi yüksekliği yoktur ve kapsayıcının 170px'lik tam yüksekliğini doldurur.
flex-direction: column: artık justify-content öğeleri dikeyde, align-items ise yatayda taşır. İki özellik ekranı değil eksenleri takip eder.

Ana eksen ve çapraz eksen

Her flex kapsayıcının iki ekseni vardır. Ana eksen, flex-direction ile belirlenen, öğelerin aktığı yöndür. Çapraz eksen onu dik keser.

`flex-direction`	Ana eksen	Çapraz eksen	`justify-content` öğeleri taşır	`align-items` öğeleri taşır
`row` (varsayılan)	yatay, okuma sırasında	dikey	yatayda	dikeyde
`row-reverse`	yatay, ters	dikey	yatayda	dikeyde
`column`	dikey, yukarıdan aşağı	yatay	dikeyde	yatayda
`column-reverse`	dikey, aşağıdan yukarı	yatay	dikeyde	yatayda

Sağdan sola bir sayfada (dir="rtl") row sağ kenardan başlar, çünkü ana eksen yazı yönünü takip eder.

Kapsayıcı özellikleri

Bunlar display: flex verilen elemente yazılır:

Özellik	Ne yapar	Varsayılan
`flex-direction`	Satır mı sütun mu, hangi yöne	`row`
`flex-wrap`	Yer bittiğinde öğelerin yeni bir satıra geçip geçmeyeceği	`nowrap`
`flex-flow`	`flex-direction` ve `flex-wrap` için kısa yazım	`row nowrap`
`justify-content`	Ana eksen boyunca yerleşim ve boşluk	`normal` (`flex-start` gibi davranır)
`align-items`	Öğelerin çapraz eksen boyunca yerleşimi	`normal` (`stretch` gibi davranır)
`align-content`	Öğeler alt satıra geçtiğinde satırlar arası boşluk	`normal`
`gap`	Öğeler arası boşluk (`row-gap`, `column-gap`)	`0`

justify-content ve align-items'ın bütün değerleriyle kendi sayfası var: justify-content ve align-items. Alt satıra geçme ve yön flex-wrap sayfasında.

Öğe özellikleri: flex-grow, flex-shrink, flex-basis

Bunlar çocuklara yazılır ve kapsayıcının genişliğini nasıl paylaşacaklarına karar verir:

flex-basis: boş alan paylaştırılmadan önce bir öğenin başladığı boyut (auto, "genişliğimi ya da içeriğimi kullan" demektir).
flex-grow: öğenin kalan alandan kaç pay aldığı. 0 asla büyümez demektir.
flex-shrink: yeterli alan olmadığında öğenin ne kadar vazgeçtiği. 0 asla küçülmez demektir.

flex kısa yazımı üçünü de ayarlar:

Yazdığın	Anlamı	Davranış
`flex: initial` (varsayılan)	`0 1 auto`	İçerik boyutu, küçülebilir, asla büyümez
`flex: 1`	`1 1 0%`	Sıfırdan başlar ve alandan eşit bir pay alır
`flex: auto`	`1 1 auto`	İçerik boyutu artı kalan alandan bir pay
`flex: none`	`0 0 auto`	Tam olarak içeriği ya da genişliği, asla büyümez ya da küçülmez
`flex: 2`	`2 1 0%`	`flex: 1` olan bir öğenin iki katı pay

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex grow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; width: 480px; background: #e5e7eb; padding: 8px; margin-bottom: 8px; }
    .row div { background: #2563eb; color: white; padding: 8px 0; text-align: center; }
    .one { flex: 1; }
    .row .two { flex: 2; background: #16a34a; }
    .row .none { flex: none; width: 100px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row"><div class="one">flex: 1</div><div class="one">flex: 1</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="one">flex: 1</div><div class="two">flex: 2</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="none">flex: none</div><div class="one">flex: 1</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.row')].map((row) =>
      [...row.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(' + ')
    ).join(' | ');
  </script>
</body>
</html>

Her satır padding'inin içinde 480px genişliğinde ve iki 8px'lik boşluk öğelere 464px bırakıyor. Yazdırılan genişlikler nasıl paylaştırıldığını gösteriyor: ilk satırda her biri yaklaşık 155px, ikincide 116 + 232 + 116 (flex: 2 öğesi komşularının her birinin iki katı pay alıyor), üçüncüde ise 100 + 372; burada flex: none öğesi genişliğini koruyor ve diğer öğe geri kalanın hepsini alıyor.

Flexbox ile gerçek düzenler

Başta bir logo ve sonda linkler olan bir başlık, en yaygın flex düzenidir. Bir öğeye verilen margin-inline-start: auto, önündeki bütün boş alanı yutar ve onu ve ondan sonraki her şeyi sona iter:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nav bar</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    nav { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #111827; }
    nav a { color: white; text-decoration: none; }
    .logo { font-weight: 700; font-size: 20px; }
    .push { margin-inline-start: auto; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <nav>
    <a class="logo" href="#">Logo</a>
    <a class="push" href="#">Docs</a>
    <a href="#">Pricing</a>
    <a class="cta" href="#">Sign up</a>
  </nav>
</body>
</html>

align-items: center daha büyük logo metnini linklerle hizalar ve gap linklerin arasını, sonuncuda geri alınacak margin'ler olmadan açar.

İkinci gündelik kalıp bir medya satırıdır: sabit boyutlu bir ikon ve geri kalanı alıp kendi sütununda satır kıran metin.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media object</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .media { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
    .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #16a34a; }
    .text { flex: 1; min-width: 0; margin: 0; }
  </style>
</head>
<body>
  <div class="media">
    <div class="avatar"></div>
    <p class="text">This text wraps next to the circle. However long it gets, the circle keeps its 48px size because it has flex: none.</p>
  </div>
</body>
</html>

Garantiyi flex: none verir. Flex öğeleri varsayılan olarak küçülür, bu yüzden onu daireden kaldırır ve metinden de flex: 1'i kaldırırsan paragraf daireyi yaklaşık 23px genişliğe sıkıştırır: bir oval. Bir kutuda tek bir şeyi ortalamak flexbox ile iki satırdır (justify-content: center; align-items: center); div ortalama sayfası bunu diğer yollarla karşılaştırıyor.

order ve erişilebilirlik

order özelliği ve -reverse yönleri, öğelerin HTML'de nerede olduğunu değil, nerede göründüğünü değiştirir. Ekran okuyucular ve Tab tuşu hâlâ HTML sırasını takip eder, bu yüzden bir klavye kullanıcısı ekrandaki ilk linkten sonuncusuna atlayabilir. Onları yalnızca süsleme için kullan; sıranın bir anlamı olduğunda HTML'i değiştir.

Flexbox mı grid mi

Flexbox bir seferde tek yönde çalışır: bir satırdaki öğeler kendilerini içeriklerine göre boyutlandırır ve ikinci bir satır (alt satıra geçmeyle) ilkiyle hizalanmaz. Grid ise iki yönde çalışır: sütunları ve satırları tanımlarsın ve öğeler onlara oturur. Bir gezinme çubuğu, bir araç çubuğu ya da bir form satırı flexbox'tır; bir galeri ya da kenar çubuklu bir sayfa grid'dir.

Sık yapılan hatalar

display: flex'i ebeveyn yerine öğeye vermek. Kapsayıcı display: flex alır; çocukları öğelerdir.
Yükseklik yokken align-items'ın öğeleri dikeyde taşımasını beklemek. Kapsayıcı yalnızca en uzun öğesi kadar uzunsa hareket edecek yer yoktur. Kapsayıcıya bir yükseklik ver; aksi halde özellik çalışıyordur ama yapacak bir işi yoktur.
Küçülmek yerine taşan metin. Flex öğelerinde min-width: auto vardır. Küçülmesi gereken öğeye min-width: 0 ekle.
flex: 1 kullanıp genişliklerin neden farklı olduğunu merak etmek. flex: 1 olan öğeler alanı eşit paylaşır, ama içeriği sığmayan bir öğe (uzun bir URL, bir resim) onun altına küçülmez. min-width: 0 bunu da düzeltir.
Öğeler arasında margin'ler. Kapsayıcıda gap kullan; yalnızca öğelerin arasına girer.
Gereksiz yere iç içe flex. Yalnızca doğrudan çocuklar flex öğesidir. Torunlar, kendi ebeveynleri de display: flex değilse normal düzeni takip eder.

Sıkça Sorulan Sorular

display: flex ne işe yarar?

Bir elementi flex kapsayıcıya çevirir. Doğrudan çocukları flex öğeleri olur ve varsayılan olarak bir satırda yan yana, aynı yüksekliğe esnetilerek yerleştirilir; alanı nasıl paylaştıklarını justify-content, align-items ve gap gibi özellikler kontrol eder.

flex: 1 ne anlama gelir?

flex: 1, flex: 1 1 0%'nin kısaltmasıdır: öğe büyüyebilir (flex-grow: 1), küçülebilir (flex-shrink: 1) ve sıfır boyuttan başlar (flex-basis: 0%). Hepsi flex: 1 olan öğeler boş alanı eşit paylaşır, bu yüzden içerikleri sığmıyor olmadıkça aynı genişlikte olurlar.

justify-content ile align-items arasındaki fark nedir?

justify-content öğeleri ana eksen boyunca (bir satırda yatayda), align-items ise çapraz eksen boyunca (bir satırda dikeyde) yerleştirir. flex-direction: column ile iki eksen yer değiştirir, böylece justify-content dikey olur.

Flexbox mı grid mi kullanmalıyım?

Öğeleri kendilerini içeriklerine göre boyutlandıran tek bir satır ya da sütun için flexbox kullan: gezinme çubukları, buton grupları, bir input'un yanındaki etiket. Birbiriyle hizalanan satırlar ve sütunlar istediğinde, örneğin bir kart ızgarası ya da sayfa düzeni için grid kullan.

Flex öğem neden kapsayıcısından taşıyor?

Bir flex öğesinin varsayılan olarak min-width: auto değeri vardır, bu yüzden en uzun kelimesinin ya da en geniş çocuğunun genişliğinin altına küçülmeyi reddeder. Küçülebilmesi için öğeye min-width: 0 (ya da overflow: hidden) ver, örneğin text-overflow: ellipsis'in çalışması için.

Flexbox span gibi satır içi elementlerde çalışır mı?

Evet. display: flex verilen her element bir flex kapsayıcıdır ve çocukları kendi display değerleri ne olursa olsun flex öğesi olur; böylece <span> çocuklar satır içi olmaktan çıkar ve bloklar gibi genişlik, yükseklik ve margin kabul eder.

İlgili kavramlar