Flexbox CSS: Hướng dẫn căn chỉnh layout

Flexbox là gì?

Flexbox (Flexible Box Layout) là một module CSS giúp bạn tạo layout dễ dàng. Thay vì dùng float hay position phức tạp, Flexbox cho phép căn chỉnh, phân bố không gian giữa các phần tử chỉ với vài dòng code.

Năm 2026, tất cả trình duyệt đều hỗ trợ Flexbox. Nếu cần ôn lại CSS cơ bản, hãy đọc CSS là gì?

Flex Container và Flex Items

Flexbox gồm 2 vai trò:

• Flex Container (phần tử cha): Đặt display: flex
• Flex Items (phần tử con): Các phần tử bên trong container

.container {
    display: flex; /* Chỉ cần dòng này để kích hoạt Flexbox! */
}

Thuộc tính của Container

flex-direction — Hướng sắp xếp

.container {
    display: flex;
    flex-direction: row;            /* Ngang (mặc định) */
    /* flex-direction: column; */   /* Dọc */
}

justify-content — Căn chỉnh trục chính

.container {
    display: flex;
    justify-content: flex-start;      /* Căn trái (mặc định) */
    /* justify-content: center; */    /* Căn giữa */
    /* justify-content: space-between; */ /* Cách đều, 2 đầu sát mép */
    /* justify-content: space-evenly; */ /* Cách đều hoàn toàn */
}

align-items — Căn chỉnh trục phụ

.container {
    display: flex;
    align-items: stretch;      /* Kéo giãn (mặc định) */
    /* align-items: center; */ /* Căn giữa theo chiều dọc */
}

flex-wrap — Xuống dòng

.container {
    display: flex;
    flex-wrap: wrap; /* Tự động xuống dòng khi tràn */
}

gap — Khoảng cách giữa items

.container {
    display: flex;
    gap: 16px; /* Khoảng cách đều giữa các item */
}

Thuộc tính của Item

.item {
    flex-grow: 1;        /* Tỷ lệ giãn ra */
    flex-shrink: 0;      /* Không co lại */
    flex-basis: 200px;   /* Kích thước cơ bản */
    align-self: center;  /* Căn chỉnh riêng */
    order: 2;            /* Thay đổi thứ tự hiển thị */
}

/* Viết tắt */
.item { flex: 1; }

5 ví dụ thực tế

1. Căn giữa hoàn hảo (dọc + ngang)

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

2. Thanh navigation ngang

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
}
.navbar a { color: white; padding: 8px 16px; }

3. Sidebar + Nội dung chính

.layout { display: flex; gap: 20px; }
.sidebar { flex: 0 0 250px; }
.main-content { flex: 1; }

4. Grid thẻ bài viết

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    flex: 1 1 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

5. Footer luôn ở đáy trang

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
footer { padding: 20px; background: #333; color: white; }

Câu hỏi thường gặp (FAQ)

Hỏi: Flexbox và CSS Grid khác nhau thế nào?

Trả lời: Flexbox dùng cho layout 1 chiều (hàng hoặc cột). Grid dùng cho layout 2 chiều (hàng và cột cùng lúc).

Hỏi: Flexbox có dùng cho responsive design được không?

Trả lời: Có. Kết hợp flex-wrap và flex-basis để tạo layout tự động thích ứng.

Bước tiếp theo

1. Ôn CSS cơ bản → CSS là gì?
2. Ôn HTML → HTML là gì?