CSSFlexbox là mô hình layout một chiều: bố trí item dọc theo một trục, và phân chia không gian còn thừa hoặc còn thiếu.
css
.nav {
display: flex;
align-items: center; /* căn giữa theo trục phụ */
gap: 16px; /* khoảng cách, thay margin */
}
.nav .spacer { flex: 1; } /* nuốt hết chỗ trống, đẩy phần sau sang phải */Điểm mạnh thật sự là flex trên item — kiểm soát co giãn theo nội dung:
css
.sidebar { flex: 0 0 280px; } /* không giãn, không co, cố định 280px */
.content { flex: 1 1 auto; } /* ăn hết phần còn lại */Flex hay Grid?
| Tình huống | Chọn |
|---|---|
| Một hàng hoặc một cột, kích thước phụ thuộc nội dung | Flex |
| Cần hàng và cột khớp nhau thành lưới | Grid |
| Thanh điều hướng, nhóm nút, danh sách chip | Flex |
| Bố cục trang, dashboard, gallery đều ô | Grid |
Lưu ý: flex item không tự co nhỏ hơn nội dung của nó vì min-width: auto mặc định. Một <pre> hay chuỗi dài làm cả cột phình ra và tràn:
css
.item { min-width: 0; } /* cho phép co lại — dòng cứu sinh của flex layout */