CSS justify-content dan align-items: Semua Nilai

justify-content dan align-items dalam satu kalimat

Di dalam container flex, justify-content menyebar item di sepanjang sumbu utama (melintasi baris), dan align-items menyejajarkannya di sumbu silang (naik turun di dalam baris). Keduanya dipasang di container:

<!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>

Kotaknya berada di tengah ke dua arah: jaraknya sama dari tepi awal dan tepi akhir, juga dari atas dan bawah. Hapus height: 140px, maka align-items: center tidak punya apa-apa untuk dikerjakan, karena container menyusut setinggi item itu sendiri.

Semua nilai justify-content, lengkap dengan ukurannya

Setiap baris di bawah berisi tiga item yang sama dengan justify-content yang berbeda. Angka di label atas setiap baris adalah jarak yang ditinggalkan browser: sebelum item pertama, di antara item, dan setelah item terakhir.

<!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>

Lebar container 420px dan item memakai 180px, jadi ada 240px ruang kosong. Ke mana ruang itu pergi:

flex-start mengikuti arah flex, sedangkan start mengikuti arah tulisan. Keduanya hanya berbeda pada row-reverse atau column-reverse, di mana flex-start berada di ujung yang dibalik.

Semua nilai align-items

align-items bekerja melintang terhadap baris. Item di bawah punya tinggi yang berbeda-beda, jadi kamu bisa melihat apa yang dilakukan setiap nilai terhadapnya:

<!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>

Di kotak baseline, ketiga label "Ag" berdiri di satu garis meskipun yang pertama lebih besar dan yang kedua punya padding di atasnya. Nilai ini cocok untuk baris yang mencampur judul besar dengan teks kecil, atau label dengan input.

Klik untuk meratakan

Klik sel mana saja di grid 3 kali 3. Kotaknya akan pindah ke sana, dan CSS yang menempatkannya di sana ditampilkan di bawah:

<!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>

Baris pada pemilih mengubah align-items, dan kolomnya mengubah justify-content. Sel di tengah adalah "center a div" yang klasik.

Di dalam kolom, keduanya bertukar

justify-content selalu mengikuti sumbu utama. Dengan flex-direction: column, sumbu utama menjadi vertikal, jadi justify-content memindahkan item naik turun dan align-items memindahkannya ke samping:

<!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>

Kalau kamu tertukar, cukup tukar kedua property itu, tidak perlu menulis ulang layout-nya.

align-self dan margin auto: hanya satu item

align-self pada sebuah item menimpa align-items untuk item itu. Di flexbox tidak ada justify-self. Untuk memindahkan satu item di sepanjang sumbu utama, beri item itu margin auto, yang mengambil semua ruang kosong di sisi tersebut:

<!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>

Item hijau turun ke bawah sendirian, dan item kuning terdorong ke ujung terjauh baris, sementara yang lain tetap di awal.

Kalau ada beberapa baris: align-content

align-items meratakan item di dalam barisnya. Kalau isi container terbungkus menjadi beberapa baris, align-content mengatur jarak antar baris itu sendiri, dan menerima nilai yang sama dengan justify-content. Property ini tidak berpengaruh di container nowrap, karena satu-satunya barisnya selalu mengisi tinggi container. Halaman flex-wrap menunjukkannya.

Kesalahan yang sering terjadi

• Tertukar sumbu. justify-content adalah arah aliran, align-items melintang terhadapnya. Di dalam kolom, menengahkan secara vertikal memakai justify-content: center.
• Tidak ada ruang kosong. Item dengan flex: 1 mengambil semua ruang, jadi justify-content tidak punya ruang untuk dibagi. Hal yang sama terjadi kalau container memakai inline-flex dan lebarnya sama persis dengan item-itemnya.
• Tidak ada tinggi untuk align-items. Container yang setinggi isinya tidak menyisakan apa pun untuk diratakan. Tetapkan height atau min-height.
• Mencari justify-self di flexbox. Di sana property itu diabaikan. Pakai margin-inline-start: auto (atau margin-left: auto) pada item.
• align-items: stretch yang tidak memanjang. Item yang punya height sendiri tetap memakai tinggi itu. Hapus tingginya (pakai min-height kalau butuh batas minimum).
• Memasang property di item. Keduanya dipasang di container flex. Hanya align-self yang dipasang di item.