CSS justify-content ve align-items: Bütün Değerler

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

justify-content öğeleri ana eksen, yani aktıkları yön boyunca dağıtır (flex-direction: row için yatay). align-items ise onları çapraz eksen boyunca konumlandırır (bir satır için dikey). Bir sütunda ikisi yer değiştirir: justify-content dikey olur.

Q: space-between, space-around ve space-evenly arasındaki fark nedir?

space-between ilk öğeden önce ve son öğeden sonra boşluk bırakmaz, geri kalanı öğeler arasında paylaştırır. space-around her öğeye iki yanında eşit boşluk verir, bu yüzden kenarlar yarım boşluk alır. space-evenly kenarlar dahil her boşluğu eşit yapar.

Q: justify-content neden çalışmıyor?

Genellikle dağıtılacak boş alan yoktur: bir öğede flex-grow ya da flex: 1 vardır ya da kapsayıcı yalnızca öğeleri kadar geniştir (örneğin display: inline-flex ya da float edilmiş bir kapsayıcı). Ayrıca display: flex'in öğelere değil ebeveyne verildiğini kontrol et.

Q: align-self ne işe yarar?

align-self, tek bir öğe için kapsayıcının align-items değerini ezer. Örneğin bir çocuğa verilen align-self: flex-end, diğerleri align-items'ın koyduğu yerde kalırken yalnızca o çocuğu çapraz eksenin sonuna taşır.

Q: Flexbox'ta justify-self var mı?

Hayır. Flexbox justify-self'i yok sayar, çünkü ana eksen bütün öğeler tarafından paylaşılır. Tek bir öğeyi ana eksen boyunca itmek için margin-inline-start: auto gibi bir auto margin kullan. justify-self grid'de çalışır.

Her biri tek cümlede justify-content ve align-items

Bir flex kapsayıcıda justify-content öğeleri ana eksen boyunca (satır boyunca) dağıtır, align-items ise onları çapraz eksen üzerinde (satırın aşağısı ve yukarısı boyunca) hizalar. İkisi de kapsayıcıya yazılır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center both ways</title>
  <style>
    .box {
      display: flex;
      justify-content: center; /* horizontal, in a row */
      align-items: center;     /* vertical, in a row */
      height: 140px;
      background: #e5e7eb;
    }
    .item { background: #2563eb; color: white; padding: 12px 18px; }
  </style>
</head>
<body>
  <div class="box"><div class="item">Centered</div></div>
</body>
</html>

Kutu iki yönde de ortalanmış: başlangıç ve bitiş kenarlarına, üst ve alt kenarlara eşit uzaklıkta. height: 140px'i kaldır, align-items: center'ın yapacak bir işi kalmaz, çünkü kapsayıcı öğenin kendi yüksekliğine küçülür.

Bütün justify-content değerleri, ölçülmüş

Aşağıdaki her satır aynı üç öğe, farklı bir justify-content ile. Her satırın üstündeki etiketteki sayılar tarayıcının bıraktığı boşluklar: ilk öğeden önce, öğeler arasında ve son öğeden sonra.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>justify-content values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; width: 420px; background: #e5e7eb; margin: 2px 0 10px; }
    .row div { width: 60px; height: 28px; background: #2563eb; }
    .row div:nth-child(2) { background: #16a34a; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="list"></div>
  <script>
    const values = ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
    const list = document.getElementById('list');
    values.forEach((v) => {
      const label = document.createElement('code');
      const row = document.createElement('div');
      row.className = 'row';
      row.style.justifyContent = v;
      row.innerHTML = '<div></div><div></div><div></div>';
      list.append(label, row);
      const b = row.getBoundingClientRect();
      const r = [...row.children].map((c) => c.getBoundingClientRect());
      const gaps = [r[0].left - b.left, r[1].left - r[0].right, r[2].left - r[1].right, b.right - r[2].right];
      label.textContent = 'justify-content: ' + v + '   gaps: ' + gaps.map(Math.round).join(' / ');
    });
  </script>
</body>
</html>

Kapsayıcı 420px ve öğeler 180px kaplıyor, yani 240px boş alan var. Nereye gittiği:

Değer	Boş alan nereye gider	Demodaki boşluklar
`flex-start` (ve `start`)	tamamı öğelerden sonra	0 / 0 / 0 / 240
`center`	yarısı önce, yarısı sonra	120 / 0 / 0 / 120
`flex-end` (ve `end`)	tamamı öğelerden önce	240 / 0 / 0 / 0
`space-between`	yalnızca öğeler arasına	0 / 120 / 120 / 0
`space-around`	her öğenin iki yanına eşit, bu yüzden kenarlar yarısını alır	40 / 80 / 80 / 40
`space-evenly`	kenarlar dahil her boşluk eşit	60 / 60 / 60 / 60

flex-start flex yönünü, start ise yazı yönünü takip eder. Yalnızca row-reverse ya da column-reverse ile farklılaşırlar; orada flex-start ters çevrilmiş uçtadır.

Bütün align-items değerleri

align-items satırın karşısında çalışır. Aşağıdaki öğelerin yükseklikleri farklı, böylece her değerin onlarla ne yaptığını görebilirsin:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-items values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: flex; flex-wrap: wrap; gap: 16px; }
    .row { display: flex; gap: 4px; width: 170px; height: 100px; background: #e5e7eb; }
    .row div { width: 50px; background: #2563eb; color: white; }
    .row div:nth-child(1) { font-size: 26px; }
    .row div:nth-child(2) { background: #16a34a; padding-top: 20px; }
    .row div:nth-child(3) { background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid" id="grid"></div>
  <script>
    ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'].forEach((v) => {
      const cell = document.createElement('div');
      cell.innerHTML = '<code>align-items: ' + v + '</code><div class="row" style="align-items: ' + v + '"><div>Ag</div><div>Ag</div><div>Ag</div></div>';
      document.getElementById('grid').append(cell);
    });
  </script>
</body>
</html>

Değer	Çapraz eksende ne olur
`stretch` (varsayılan)	Yüksekliği ayarlanmamış öğeler kapsayıcıyı dolduracak şekilde büyür
`flex-start` (ve `start`)	Öğeler kendi yüksekliklerinde üstte durur
`center`	Öğeler kendi yüksekliklerinde ortalanır
`flex-end` (ve `end`)	Öğeler altta durur
`baseline`	Öğeler, metinlerinin ilk satırları tek bir taban çizgisini paylaşacak şekilde kayar

baseline kutusunda üç "Ag" etiketi, ilki daha büyük ve ikincisinin üstünde padding olmasına rağmen tek bir çizgide duruyor. Büyük bir başlığı küçük metinle ya da bir etiketi bir input'la karıştıran bir satır için doğru değer budur.

Tıkla ve hizala

3'e 3 ızgaranın herhangi bir hücresine tıkla. Kutu oraya gider ve onu oraya koyan CSS aşağıda yazdırılır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alignment picker</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .wrap { display: flex; gap: 16px; align-items: flex-start; }
    .picker { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; }
    .picker button { height: 28px; border: 1px solid #111827; background: white; cursor: pointer; }
    .picker button[aria-pressed="true"] { background: #2563eb; }
    #stage { display: flex; width: 260px; height: 150px; background: #e5e7eb; }
    .item { background: #16a34a; color: white; padding: 10px 14px; }
    pre { background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="picker" id="picker"></div>
    <div id="stage"><div class="item">Box</div></div>
  </div>
  <pre id="out"></pre>
  <script>
    const spots = ['flex-start', 'center', 'flex-end'];
    const stage = document.getElementById('stage');
    const pick = (row, col, btn) => {
      stage.style.alignItems = spots[row];
      stage.style.justifyContent = spots[col];
      document.querySelectorAll('.picker button').forEach((b) => b.setAttribute('aria-pressed', b === btn));
      document.getElementById('out').textContent =
        '.stage {\n  display: flex;\n  justify-content: ' + spots[col] + ';\n  align-items: ' + spots[row] + ';\n}';
    };
    spots.forEach((_, row) => spots.forEach((_, col) => {
      const btn = document.createElement('button');
      btn.setAttribute('aria-label', 'row ' + (row + 1) + ', column ' + (col + 1));
      btn.addEventListener('click', () => pick(row, col, btn));
      document.getElementById('picker').append(btn);
    }));
    pick(1, 1, document.querySelectorAll('.picker button')[4]);
  </script>
</body>
</html>

Seçicinin satırları align-items'ı, sütunları justify-content'i değiştirir. Ortadaki hücre klasik "div ortalama"dır.

Bir sütunda ikisi yer değiştirir

justify-content her zaman ana ekseni takip eder. flex-direction: column ile ana eksen dikeydir, bu yüzden justify-content öğeleri yukarı aşağı, align-items ise yana taşır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Column axes</title>
  <style>
    .col {
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* now vertical: pushed to the bottom */
      align-items: center;       /* now horizontal: centered */
      height: 160px;
      background: #e5e7eb;
    }
    .col div { background: #2563eb; color: white; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="col"><div>One</div><div>Two</div></div>
</body>
</html>

Karıştırırsan düzeni baştan yazmak yerine iki özelliğin yerini değiştir.

align-self ve auto margin'ler: yalnızca tek öğe

Bir öğedeki align-self, o öğe için align-items'ı ezer. Flexbox'ta justify-self yoktur; tek bir öğeyi ana eksen boyunca taşımak için ona o taraftaki bütün boş alanı alan bir auto margin ver:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>align-self</title>
  <style>
    .bar { display: flex; align-items: flex-start; gap: 8px; height: 90px; background: #e5e7eb; }
    .bar div { background: #2563eb; color: white; padding: 8px 12px; }
    .bar .down { align-self: flex-end; background: #16a34a; }
    .bar .last { margin-inline-start: auto; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="bar">
    <div>Top</div>
    <div class="down">align-self: flex-end</div>
    <div class="last">margin-inline-start: auto</div>
  </div>
</body>
</html>

Yeşil öğe tek başına alta iniyor, kehribar rengi öğe ise satırın en sonuna itiliyor; diğerleri başta kalıyor.

Birden fazla satır olduğunda: align-content

align-items öğeleri kendi satırlarının içinde hizalar. Bir kapsayıcı birkaç satıra kırıldığında align-content satırların kendisini aralar ve justify-content ile aynı değerleri alır. Tek satırı her zaman kapsayıcının yüksekliğini dolduran nowrap bir kapsayıcıda hiçbir şey yapmaz. Onu flex-wrap sayfası gösteriyor.

Sık yapılan hatalar

Eksenleri karıştırmak. justify-content akış yönüdür, align-items onun karşısıdır. Bir sütunda dikey ortalama justify-content: center'dır.
Boş alan yok. flex: 1 olan bir öğe bütün alanı alır, bu yüzden justify-content'in dağıtacak bir şeyi kalmaz. Kapsayıcı inline-flex olup tam olarak öğeleri kadar geniş olduğunda da aynısı olur.
align-items için yükseklik yok. İçeriği kadar uzun bir kapsayıcı hizalanacak bir şey bırakmaz. Bir height ya da min-height ver.
Flexbox'ta justify-self aramak. Orada yok sayılır. Öğeye margin-inline-start: auto (ya da margin-left: auto) ver.
Esnemeyen align-items: stretch. Kendi height değeri olan bir öğe onu korur. Yüksekliği kaldır (bir minimum gerekiyorsa min-height kullan).
Özellikleri öğelere vermek. İkisi de flex kapsayıcıya yazılır. Bir öğeye yalnızca align-self yazılır.

Sıkça Sorulan Sorular

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

justify-content öğeleri ana eksen, yani aktıkları yön boyunca dağıtır (flex-direction: row için yatay). align-items ise onları çapraz eksen boyunca konumlandırır (bir satır için dikey). Bir sütunda ikisi yer değiştirir: justify-content dikey olur.

space-between, space-around ve space-evenly arasındaki fark nedir?

space-between ilk öğeden önce ve son öğeden sonra boşluk bırakmaz, geri kalanı öğeler arasında paylaştırır. space-around her öğeye iki yanında eşit boşluk verir, bu yüzden kenarlar yarım boşluk alır. space-evenly kenarlar dahil her boşluğu eşit yapar.

justify-content neden çalışmıyor?

Genellikle dağıtılacak boş alan yoktur: bir öğede flex-grow ya da flex: 1 vardır ya da kapsayıcı yalnızca öğeleri kadar geniştir (örneğin display: inline-flex ya da float edilmiş bir kapsayıcı). Ayrıca display: flex'in öğelere değil ebeveyne verildiğini kontrol et.

align-items center neden dikeyde ortalamıyor?

Kapsayıcı büyük olasılıkla tam olarak içeriği kadar uzundur, bu yüzden içinde ortalanacak bir şey yoktur. Flex kapsayıcıya bir yükseklik ya da min-height ver, öğeler ortasına gider.

align-self ne işe yarar?

align-self, tek bir öğe için kapsayıcının align-items değerini ezer. Örneğin bir çocuğa verilen align-self: flex-end, diğerleri align-items'ın koyduğu yerde kalırken yalnızca o çocuğu çapraz eksenin sonuna taşır.

Flexbox'ta justify-self var mı?

Hayır. Flexbox justify-self'i yok sayar, çünkü ana eksen bütün öğeler tarafından paylaşılır. Tek bir öğeyi ana eksen boyunca itmek için margin-inline-start: auto gibi bir auto margin kullan. justify-self grid'de çalışır.

İlgili kavramlar