CSS flex-wrap và flex-direction: hàng, cột, xuống dòng

flex-wrap: một dòng, hay bao nhiêu dòng cũng được

Mặc định, một flex container giữ mọi item trên một dòng (flex-wrap: nowrap) và co chúng lại cho vừa. flex-wrap: wrap thì cho chúng giữ kích thước và chuyển xuống dòng tiếp theo:

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

Mỗi item cần 100px, năm item trong một hộp rộng 340px. Năm item và bốn khoảng gap 8px cần 532px, nên khi không xuống dòng, mỗi item bị ép còn khoảng 62px, vì mặc định flex item sẽ co lại. Với wrap, chúng giữ nguyên 100px: ba item vừa trên dòng đầu và hai item còn lại chuyển xuống dòng thứ hai.

Các giá trị của flex-wrap

Xem các item xuống dòng

Kéo thanh trượt để thay đổi chiều rộng của container. Phần hiển thị đếm số dòng và cho biết mỗi dòng có bao nhiêu item:

<!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, bốn item 90px và ba khoảng gap 8px (384px) vừa trên một dòng, nên bạn có 4 + 2. Kéo về phía 620px thì cả sáu item vừa trên một dòng; kéo về phía 120px thì mỗi item chiếm riêng một dòng.

flex-direction: hàng hay cột

flex-direction đặt hướng chạy của các item, đó chính là trục chính:

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

Trong hai hộp row, các item giãn ra hết chiều cao của hộp, vì align-items: stretch tác động theo chiều ngang của hàng. Trong các hộp column, chúng lại giãn ra hết chiều rộng, cũng vì lý do đó. Các trục đã xoay, và mọi thuộc tính căn chỉnh xoay theo (trang justify-content trình bày chi tiết điều này).

flex-flow: cả hai trong một dòng

flex-flow là cách viết tắt cho flex-direction rồi đến flex-wrap:

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

Thẻ responsive với wrap, không cần media query

Cho mỗi item một kích thước ban đầu bằng flex: 1 1 180px và cho hàng xuống dòng. Mỗi item giãn ra lấp đầy dòng của nó, và khi một dòng không còn chỗ cho thêm một item 180px, item tiếp theo sẽ xuống dòng:

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

Trong khung xem trước rộng khoảng 800px, ba thẻ vừa trên dòng đầu (mỗi thẻ khoảng 253px) và hai thẻ cuối chia nhau dòng thứ hai, nơi mỗi thẻ giãn ra khoảng 386px. Flexbox hoạt động như vậy: mỗi dòng tự chia khoảng trống của mình, nên các thẻ trên một dòng cuối ngắn sẽ rộng hơn các thẻ phía trên. Nếu bạn muốn thẻ cuối giữ cùng chiều rộng với các thẻ khác, hãy dùng grid với repeat(auto-fill, minmax(180px, 1fr)) (xem trang grid).

align-content: giãn cách giữa các dòng

Khi container xuống dòng và cao hơn tổng các dòng, align-content quyết định các dòng nằm ở đâu. Nó nhận cùng các giá trị như justify-content, cộng thêm stretch:

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

Trong hộp đầu tiên, cả hai dòng nằm ở trên cùng. Trong hộp thứ hai, dòng đầu ở trên cùng còn dòng thứ hai ở dưới cùng, toàn bộ chiều cao dư nằm giữa chúng.

Thứ tự đảo ngược và khả năng tiếp cận

row-reverse, column-reverse và wrap-reverse chỉ thay đổi vị trí vẽ các item. Trình đọc màn hình và phím Tab vẫn đi theo thứ tự trong HTML, nên người dùng bàn phím sẽ duyệt các item theo hướng ngược với những gì họ thấy. Chỉ đảo ngược để tạo hiệu ứng hiển thị; khi thứ tự mang ý nghĩa, hãy đổi nó trong HTML.

Lỗi thường gặp

• Các item co lại thay vì xuống dòng. Item có flex: 1 bắt đầu từ flex-basis bằng 0 và bị ép vào một dòng. Hãy cho chúng một basis thật, ví dụ flex: 1 1 200px.
• Đặt flex-wrap trên các item. Nó thuộc về flex container.
• Dùng align-items để giãn cách các dòng đã xuống. Thuộc tính đó căn các item trong mỗi dòng; còn các dòng thì di chuyển bằng align-content.
• Item cuối đứng một mình bị kéo giãn cả hàng. Đó là flex-grow trên một dòng chỉ có một item. Hãy dùng grid nếu mọi thẻ phải cùng chiều rộng.
• Mong flex-direction: column lấp đầy một chiều cao. Một container dạng cột chỉ cao bằng nội dung của nó trừ khi bạn đặt height, nên justify-content không có chỗ để hoạt động.