Login

Flexbox hay Grid: khi nào nên dùng cái nào?

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Người mới học CSS thường hỏi: "Flexbox và Grid, nên dùng cái nào?". Câu trả lời ngắn gọn là cả hai, và chúng không phải đối thủ mà là đồng đội. Bài này giúp bạn có một cách ra quyết định đơn giản để khỏi phân vân mỗi lần dựng giao diện.

Khác biệt cốt lõi

Điểm khác nhau lớn nhất nằm ở số chiều:

  • Flexbox là bố cục một chiều: bạn sắp xếp item dọc theo một hàng hoặc một cột. Kích thước của item (nội dung) quyết định cách chia chỗ.
  • Grid là bố cục hai chiều: bạn định nghĩa hàng và cột trước, rồi đặt item vào các ô. Khung lưới quyết định, nội dung tuân theo.

Một cách nhớ: Flexbox đi từ nội dung ra ngoài (content-first), Grid đi từ bố cục vào trong (layout-first).

Khi nào Flexbox là lựa chọn tốt

  • Thanh điều hướng với các liên kết nằm ngang.
  • Căn giữa một phần tử hoặc căn đều nhóm nút.
  • Một hàng chứa icon và chữ, ví dụ nút có biểu tượng.
  • Thành phần nhỏ, nơi số lượng và kích thước item thay đổi theo nội dung.
  • Form nằm ngang với ô nhập co giãn cùng nút gửi.
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar .search { flex: 1; }

Ở ví dụ trên, ô tìm kiếm tự giãn chiếm hết chỗ còn lại, các nút hai bên giữ kích thước theo nội dung. Đây là thế mạnh điển hình của Flexbox.

Khi nào Grid là lựa chọn tốt

  • Bố cục tổng thể của trang với header, sidebar, nội dung và footer.
  • Lưới ảnh hoặc lưới thẻ cần các cột thẳng hàng.
  • Bất kỳ khi nào bạn nghĩ đến "hàng và cột" cùng lúc.
  • Khi có phần tử cần phủ nhiều ô, ví dụ ô nổi bật to gấp đôi.
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}

Sự khác biệt dễ thấy khi xuống dòng

Hãy tưởng tượng một danh sách thẻ có độ rộng khác nhau. Với Flexbox và flex-wrap: wrap, mỗi hàng tự chia chỗ theo nội dung của chính nó, nên các cột giữa các hàng có thể không thẳng nhau. Với Grid, cột được định nghĩa cho cả lưới, nên mọi thứ luôn thẳng hàng. Nếu bạn cần sự thẳng hàng này, hãy chọn Grid. Nếu bạn muốn các item "tự nhiên" dồn lại như chữ trong đoạn văn, Flexbox phù hợp hơn.

Kết hợp cả hai

Trong thực tế, bạn dùng cả hai ngay trong một trang. Grid dựng khung lớn, Flexbox căn chỉnh nội dung bên trong từng ô:

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Đoạn trên làm cho mỗi thẻ trong lưới có phần nội dung ở trên và nút bấm luôn nằm đáy thẻ, dù độ dài chữ khác nhau. Đây là cách phối hợp rất quen thuộc.

Quy trình ra quyết định nhanh

  1. Bố cục chỉ có một hàng hoặc một cột? Dùng Flexbox.
  2. Cần canh thẳng theo cả hàng lẫn cột? Dùng Grid.
  3. Kích thước phụ thuộc nội dung và số lượng không cố định? Nghiêng về Flexbox.
  4. Bạn đã có sơ đồ bố cục vẽ trên giấy? Nghiêng về Grid.
  5. Vẫn lưỡng lự? Thử cái đơn giản hơn trước, đổi sang cái kia chỉ mất vài dòng.

Một hiểu lầm hay gặp

Có người cho rằng Grid "mới hơn nên thay thế Flexbox". Điều này không đúng. Cả hai đều được các trình duyệt hiện đại hỗ trợ rộng rãi và phục vụ những mục đích khác nhau. Ngược lại cũng đừng cố ép Flexbox làm mọi việc: nếu bạn đang chồng nhiều lớp margin âm và tính phần trăm bằng tay, rất có thể Grid sẽ gọn hơn.

Ví dụ so sánh trực tiếp

Giả sử bạn có sáu thẻ trong một container và muốn chúng đều nhau, ba cột. Với Grid bạn viết:

.list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

Còn với Flexbox, bạn phải tính chiều rộng từng thẻ:

.list { display: flex; flex-wrap: wrap; gap: 16px; }
.list .item { flex: 0 0 calc((100% - 32px) / 3); }

Cả hai đều cho kết quả tương tự, nhưng phiên bản Grid ngắn và trực tiếp hơn nhiều. Ngược lại, nếu bạn có một hàng nút với số lượng không biết trước, Flexbox gọn hơn vì không cần khai báo số cột. Việc tự viết cả hai cách rồi so sánh sẽ giúp bạn nhớ lâu hơn bất kỳ lời khuyên nào.

Kết luận

Đừng chọn phe. Hãy hỏi mình "một chiều hay hai chiều?" và chọn công cụ tương ứng. Khi quen tay, bạn sẽ chọn gần như theo phản xạ.

Nếu muốn luyện tập chọn đúng công cụ qua nhiều bố cục thực tế, các bài thực hành trong khóa học trên codebem.com có thể giúp bạn có thêm tình huống để làm quen.

author_photo
Nguyễn Đình Cường

0 comment