Trình tạo Flexbox CSS

Thuộc tính của container

Thuộc tính của item

Mẹo flex: 1

flex: 1 là shorthand cho flex: 1 1 0%. Nó làm cho item:

• Grow để lấp đầy không gian (grow: 1)
• Shrink nếu cần (shrink: 1)
• Bắt đầu từ kích thước không (basis: 0%)

Cho các cột bằng nhau, flex: 1 trên mỗi item cho chia đều hoàn hảo. Cho sidebar không được co dưới content, dùng flex: 0 0 240px (không grow, không shrink, basis 240px).

Các mẫu phổ biến

Hero căn giữa

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar với logo trái, link phải

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* đẩy sang phải */
  display: flex;
  gap: 1rem;
}

Hàng card responsive

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, tối thiểu 260px trước khi wrap */
}

Trường form có nút (input linh hoạt, nút cố định)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox so với Grid

• Flexbox: một chiều (row HOẶC column). Tốt nhất khi kích thước item theo nội dung hoặc khi bạn phân bố không gian theo một dòng đơn.
• Grid: hai chiều (rows VÀ columns với track rõ ràng). Tốt nhất khi layout có cấu trúc hàng và cột đồng thời.

Cho navbar hoặc một chồng card: Flexbox. Cho lưới product-card với nhiều hàng card căn chỉnh: CSS Grid. Nhiều trang thực dùng cả hai, layout trang bằng Grid với Flexbox bên trong component.

Các bẫy phổ biến

• Item không lấp đầy container: mặc định align-items: stretch chỉ áp dụng nếu item không có chiều cao cố định. Với chiều cao rõ ràng, chúng giữ nguyên kích thước đó.
• gap không hoạt động: kiểm tra hỗ trợ trình duyệt. Flex gap đến muộn; Safari <14.1 không hỗ trợ. Giờ phổ quát từ 2024+.
• Con của flex column bị thu lại: flex column mặc định có align-items: stretch, kéo item đến chiều rộng container. Nếu một con đặt width, nó tách ra.
• order chỉ là thị giác: screen reader và điều hướng bàn phím theo thứ tự DOM. Đừng dùng order để làm nội dung có nghĩa; dùng nó chỉ cho hoàn thiện thị giác.