Frontend hay gặp- Flexbox = layout một chiều (hàng hoặc cột). Phân bổ không gian dọc theo một trục; hợp khi số item động và bạn muốn chúng tự co giãn/xuống dòng.
- Trục chính:
flex-direction,justify-content(căn theo trục chính),align-items(căn theo trục phụ),gap,flex: 1. - Dùng cho: thanh nav, toolbar, hàng nút, căn giữa một khối, danh sách card wrap.
- Grid = layout hai chiều (hàng và cột cùng lúc). Bạn định nghĩa khung lưới trước rồi đặt item vào.
grid-template-columns/rows,gap,grid-area,repeat(),minmax(),fr.- Dùng cho: bố cục trang tổng thể, dashboard, gallery, layout phức tạp cần canh cả 2 chiều.
Ghi nhớ: Flexbox — nội dung định hình layout (content-first); Grid — layout định hình nội dung (layout-first). Thực tế hay kết hợp: Grid dựng khung trang, Flexbox căn chi tiết bên trong.