Çalıştırılabilir CSS Dokümanları: CSS flex-wrap

Q: flex-direction row ile column arasındaki fark nedir?

row (varsayılan) öğeleri yazı yönünde yan yana koyar, column ise onları yukarıdan aşağıya üst üste dizer. Ana eksen de onunla döner, bu yüzden bir sütunda justify-content dikeyde, align-items yatayda çalışır.

Q: flex-flow nedir?

flex-direction ve flex-wrap için tek bildirimlik bir kısa yazımdır: flex-flow: row wrap;, flex-direction: row; flex-wrap: wrap; ile aynıdır.

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

align-items öğeleri kendi satırlarının içine yerleştirir. align-content ise satırların kendisini kapsayıcının içine yerleştirir, bu yüzden yalnızca kapsayıcıda flex-wrap: wrap olduğunda ve kapsayıcı satırlarından uzun olduğunda önemlidir.

flex-wrap: tek satır ya da gerektiği kadar

Varsayılan olarak bir flex kapsayıcı bütün öğelerini tek satırda tutar (flex-wrap: nowrap) ve sığsınlar diye onları küçültür. flex-wrap: wrap ise boyutlarını korumalarına ve bunun yerine bir sonraki satıra geçmelerine izin verir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-wrap</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; gap: 8px; width: 340px; padding: 8px; background: #e5e7eb; margin-bottom: 12px; }
    .item { width: 100px; height: 36px; background: #2563eb; color: white; }
    .wrap { flex-wrap: wrap; }
  </style>
</head>
<body>
  <code>flex-wrap: nowrap (default)</code>
  <div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <code>flex-wrap: wrap</code>
  <div class="box wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
  <script>
    document.querySelectorAll('.box').forEach((box) => {
      box.children[0].textContent = Math.round(box.children[0].getBoundingClientRect().width) + 'px wide';
    });
  </script>
</body>
</html>

Her öğe 100px istiyor, 340px'lik bir kutuda beş tane. Beş öğe ve dört 8px'lik boşluk 532px ister, bu yüzden alt satıra geçme olmadan her öğe yaklaşık 62px'e sıkışıyor, çünkü flex öğeleri varsayılan olarak küçülür. wrap ile 100px kalıyorlar: üçü ilk satıra sığıyor, diğer ikisi ikinci satıra geçiyor.

flex-wrap değerleri

Değer	Ne olur
`nowrap` (varsayılan)	Tek satır. Öğeler küçülür, daha fazla küçülemediklerinde kapsayıcıdan taşar
`wrap`	Sığmayan öğeler aşağıda yeni bir satır başlatır
`wrap-reverse`	Aynısı, ama yeni satırlar yukarı doğru dizilir: ilk satır en alttadır

Öğelerin alt satıra geçmesini izle

Kapsayıcının genişliğini değiştirmek için kaydırıcıyı sürükle. Gösterge satırları sayar ve her birinde kaç öğe olduğunu söyler:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrap slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    #box { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: #e5e7eb; margin: 10px 0; }
    .item { width: 90px; height: 40px; background: #16a34a; color: white; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <label>container width <input id="w" type="range" min="120" max="620" value="400"> <span id="wv"></span></label>
  <div id="box"></div>
  <p id="out"></p>
  <script>
    const box = document.getElementById('box');
    for (let i = 1; i <= 6; i++) box.insertAdjacentHTML('beforeend', '<div class="item">' + i + '</div>');
    const update = () => {
      const w = document.getElementById('w').value;
      box.style.width = w + 'px';
      document.getElementById('wv').textContent = w + 'px';
      const lines = {};
      [...box.children].forEach((c) => { const top = Math.round(c.getBoundingClientRect().top); lines[top] = (lines[top] || 0) + 1; });
      const counts = Object.values(lines);
      document.getElementById('out').textContent = counts.length + ' line(s): ' + counts.join(' + ') + ' items';
    };
    document.getElementById('w').addEventListener('input', update);
    update();
  </script>
</body>
</html>

400px'te dört 90px'lik öğe ve üç 8px'lik boşluk (384px) bir satıra sığar, yani 4 + 2 elde edersin. 620px'e doğru sürükle, altısı da tek satıra sığar; 120px'e doğru sürükle, her öğe kendi satırını alır.

flex-direction: row ya da column

flex-direction, öğelerin aktığı yönü, yani ana ekseni belirler:

Değer	Öğeler nasıl akar	İlk öğe
`row` (varsayılan)	yan yana, yazı yönünde	satırın başında
`row-reverse`	yan yana, ters	satırın sonunda
`column`	üst üste, yukarıdan aşağı	en üstte
`column-reverse`	üst üste, aşağıdan yukarı	en altta

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .box { display: flex; gap: 4px; padding: 6px; background: #e5e7eb; width: 160px; height: 110px; margin-top: 4px; }
    .box div { background: #2563eb; color: white; padding: 4px 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div><code>row</code><div class="box" style="flex-direction: row"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>row-reverse</code><div class="box" style="flex-direction: row-reverse"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column</code><div class="box" style="flex-direction: column"><div>1</div><div>2</div><div>3</div></div></div>
    <div><code>column-reverse</code><div class="box" style="flex-direction: column-reverse"><div>1</div><div>2</div><div>3</div></div></div>
  </div>
</body>
</html>

İki row kutusunda öğeler kutunun tam yüksekliğine esniyor, çünkü align-items: stretch satırın karşısında çalışır. column kutularında ise aynı nedenle tam genişliğe esniyorlar. Eksenler döndü ve her hizalama özelliği de onlarla birlikte döndü (justify-content sayfası bunu ayrıntılı gösteriyor).

flex-flow: ikisi tek satırda

flex-flow, önce flex-direction sonra flex-wrap için kısa yazımdır:

.cards { flex-flow: row wrap; }      /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */

wrap ile ve medya sorgusu olmadan esnek kartlar

Her öğeye flex: 1 1 180px ile bir başlangıç boyutu ver ve satırın kırılmasına izin ver. Her öğe kendi satırını dolduracak şekilde büyür ve bir satıra 180px'lik bir öğe daha sığmadığında bir sonraki alt satıra geçer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrapping cards</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: flex; flex-wrap: wrap; gap: 12px; }
    .card {
      flex: 1 1 180px; /* grow, shrink, start at 180px */
      padding: 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      background: #f9fafb;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">One</div>
    <div class="card">Two</div>
    <div class="card">Three</div>
    <div class="card">Four</div>
    <div class="card">Five</div>
  </div>
</body>
</html>

Yaklaşık 800px genişliğindeki bir önizlemede ilk satıra üç kart sığar (her biri yaklaşık 253px) ve son ikisi ikinci satırı paylaşır; orada her biri yaklaşık 386px'e büyür. Flexbox böyle çalışır: her satır kendi alanını paylaştırır, bu yüzden kısa bir son satırdaki kartlar yukarıdakilerden daha geniş olur. Son kartın diğerleriyle aynı genişlikte kalmasını istiyorsan bunun yerine repeat(auto-fill, minmax(180px, 1fr)) ile grid kullan (bkz. grid sayfası).

align-content: satırları aralamak

Bir kapsayıcı kırıldığında ve satırlarından uzun olduğunda satırların nereye gideceğine align-content karar verir. justify-content ile aynı değerleri, artı stretch alır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-content</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .box { display: flex; flex-wrap: wrap; gap: 6px; width: 200px; height: 160px; background: #e5e7eb; }
    .box div { width: 60px; height: 30px; background: #f59e0b; }
    .row { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <div class="row">
    <div><code>align-content: flex-start</code><div class="box" style="align-content: flex-start"><div></div><div></div><div></div><div></div><div></div></div></div>
    <div><code>align-content: space-between</code><div class="box" style="align-content: space-between"><div></div><div></div><div></div><div></div><div></div></div></div>
  </div>
</body>
</html>

İlk kutuda iki satır da üstte duruyor. İkincisinde ilk satır üstte, ikincisi altta ve bütün boş yükseklik aralarında.

Ters sıra ve erişilebilirlik

row-reverse, column-reverse ve wrap-reverse yalnızca öğelerin nereye çizildiğini 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ı öğeler arasında gördüğünün ters yönünde ilerler. Ters çevirmeyi yalnızca görsel etki için kullan; sıra bir anlam taşıyorsa onu HTML'de değiştir.

Sık yapılan hatalar

Alt satıra geçmek yerine küçülen öğeler. flex: 1 olan öğeler 0 değerindeki bir flex-basis'ten başlar ve tek satıra sıkışır. Onlara flex: 1 1 200px gibi gerçek bir başlangıç boyutu ver.
flex-wrap'i öğelere vermek. Yeri flex kapsayıcıdır.
Kırılan satırları aralamak için align-items kullanmak. Bu, öğeleri her satırın içinde hizalar; satırların kendisi align-content ile hareket eder.
Bütün satıra esnemiş yalnız bir son öğe. Bu, tek öğeli bir satırdaki flex-grow'dur. Her kartın aynı genişlikte olması gerekiyorsa grid kullan.
flex-direction: column'ın bir yüksekliği doldurmasını beklemek. Bir sütun kapsayıcı, ona bir height vermedikçe yalnızca içeriği kadar uzundur, bu yüzden justify-content'in çalışacak yeri olmaz.

Sıkça Sorulan Sorular

flex-wrap: wrap ne işe yarar?

Flex öğelerinin tek bir satıra sığmadıklarında yeni bir satıra geçmesine izin verir. Varsayılan nowrap ile öğeler tek satırda kalır ve küçülür ya da daha fazla küçülemiyorlarsa kapsayıcıdan taşar.

flex-wrap neden çalışmıyor?

Alt satıra geçme yalnızca öğelerin başlangıç boyutlarının toplamı kapsayıcıdan fazla olduğunda olur. flex: 1 olan öğeler 0 değerindeki bir flex-basis'ten başlar, bu yüzden hiçbir zaman alt satıra geçmez; onlara gerçek bir başlangıç boyutu ver (flex: 1 1 200px ya da width: 200px). Ayrıca flex-wrap'in öğelere değil flex kapsayıcıya verildiğini kontrol et.

flex-direction row ile column arasındaki fark nedir?

row (varsayılan) öğeleri yazı yönünde yan yana koyar, column ise onları yukarıdan aşağıya üst üste dizer. Ana eksen de onunla döner, bu yüzden bir sütunda justify-content dikeyde, align-items yatayda çalışır.

flex-flow nedir?

flex-direction ve flex-wrap için tek bildirimlik bir kısa yazımdır: flex-flow: row wrap;, flex-direction: row; flex-wrap: wrap; ile aynıdır.

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

align-items öğeleri kendi satırlarının içine yerleştirir. align-content ise satırların kendisini kapsayıcının içine yerleştirir, bu yüzden yalnızca kapsayıcıda flex-wrap: wrap olduğunda ve kapsayıcı satırlarından uzun olduğunda önemlidir.

İlgili kavramlar