justify-content và align-items trong CSS: mọi giá trị

justify-content và align-items, mỗi thứ một câu

Trong một flex container, justify-content dàn các item dọc theo trục chính (main axis, theo chiều của hàng) còn align-items xếp chúng thẳng hàng trên trục phụ (cross axis, lên xuống trong hàng). Cả hai đều đặt trên 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>

Hộp được căn giữa theo cả hai chiều: cách đều mép đầu và mép cuối, cách đều cạnh trên và cạnh dưới. Bỏ height: 140px đi thì align-items: center không còn gì để làm, vì container co lại bằng đúng chiều cao của item.

Mọi giá trị của justify-content, có số đo

Mỗi hàng dưới đây là cùng ba item với một giá trị justify-content khác nhau. Các con số trong nhãn phía trên mỗi hàng là khoảng trống trình duyệt để lại: trước item đầu, giữa các item và sau item cuối.

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

Container rộng 420px và các item chiếm 180px, nên còn 240px không gian trống. Phần đó đi đâu:

flex-start đi theo hướng flex còn start đi theo hướng viết. Chúng chỉ khác nhau với row-reverse hoặc column-reverse, khi flex-start nằm ở đầu bị đảo ngược.

Mọi giá trị của align-items

align-items hoạt động theo chiều vuông góc với hàng. Các item dưới đây có chiều cao khác nhau để bạn thấy mỗi giá trị xử lý chúng ra sao:

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

Trong hộp baseline, ba nhãn "Ag" nằm trên cùng một dòng dù nhãn đầu to hơn và nhãn thứ hai có padding phía trên. Đó là giá trị dành cho một hàng trộn tiêu đề lớn với chữ nhỏ, hoặc một nhãn với một ô nhập.

Bấm để căn chỉnh

Bấm vào bất kỳ ô nào của lưới 3 x 3. Hộp sẽ di chuyển đến đó, và CSS đưa nó đến đó được in ra bên dưới:

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

Các hàng của bộ chọn thay đổi align-items còn các cột thay đổi justify-content. Ô ở giữa chính là bài toán kinh điển "căn giữa một div".

Trong một cột, hai thuộc tính đổi vai

justify-content luôn đi theo trục chính. Với flex-direction: column, trục chính là chiều dọc, nên justify-content di chuyển item lên xuống còn align-items di chuyển chúng theo chiều ngang:

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

Nếu bạn nhầm hai thuộc tính, hãy đổi chỗ chúng thay vì viết lại bố cục.

align-self và margin auto: chỉ một item

align-self trên một item ghi đè align-items cho riêng item đó. Flexbox không có justify-self; để di chuyển một item dọc theo trục chính, hãy cho nó một margin auto, thứ chiếm toàn bộ không gian trống ở phía đó:

<!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 màu xanh lá tự xuống dưới cùng, còn item màu hổ phách bị đẩy về tận cuối hàng trong khi các item khác vẫn ở đầu.

Khi có nhiều dòng: align-content

align-items căn các item bên trong dòng của chúng. Khi container xuống thành nhiều dòng, align-content phân bố khoảng cách giữa chính các dòng, và nhận cùng các giá trị như justify-content. Nó không có tác dụng trong container nowrap, vì dòng duy nhất luôn lấp đầy chiều cao của container. Trang flex-wrap minh họa điều này.

Lỗi thường gặp

• Nhầm lẫn hai trục. justify-content là hướng các item nối tiếp nhau, align-items là chiều vuông góc với nó. Trong một cột, căn giữa theo chiều dọc là justify-content: center.
• Không có không gian trống. Một item có flex: 1 chiếm hết không gian, nên justify-content không còn gì để phân bố. Điều tương tự xảy ra khi container là inline-flex và rộng đúng bằng các item.
• Không có chiều cao cho align-items. Một container cao bằng nội dung không còn chỗ để căn chỉnh. Đặt height hoặc min-height.
• Tìm justify-self trong flexbox. Thuộc tính này bị bỏ qua ở đó. Dùng margin-inline-start: auto (hoặc margin-left: auto) trên item.
• align-items: stretch mà không giãn. Item có height riêng sẽ giữ nguyên nó. Bỏ height đi (dùng min-height nếu cần chiều cao tối thiểu).
• Đặt các thuộc tính trên item. Cả hai đều đặt trên flex container. Chỉ align-self mới đặt trên item.