Hướng Dẫn CSS Flexbox

Flexbox (Flexible Box Layout) là một module layout của CSS giúp sắp xếp các phần tử theo hàng hoặc cột một cách linh hoạt. Đây là công cụ được sử dụng phổ biến nhất trong phát triển giao diện web hiện đại nhờ khả năng căn chỉnh, phân bố khoảng cách và xây dựng layout responsive dễ dàng.

---

1. Tại sao cần Flexbox?

Trước khi Flexbox ra đời, việc xây dựng layout thường sử dụng:

• float
• position
• inline-block
• table layout

Những kỹ thuật này có nhiều hạn chế:

• Khó căn giữa theo chiều dọc.
• Khó chia tỷ lệ chiều rộng động.
• Code phức tạp khi responsive.
• Cần nhiều hack CSS.

Flexbox giải quyết các vấn đề trên bằng một hệ thống layout đơn giản và trực quan hơn.

---

2. Khái niệm Container và Item

Khi khai báo:

.container {
    display: flex;
}

Ta có:

• Container: phần tử chứa.
• Items: các phần tử con trực tiếp bên trong container.

Ví dụ:

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Container là phần tử có class container. Ba div bên trong là Flex Items.

---

3. Main Axis và Cross Axis

Flexbox hoạt động dựa trên hai trục:

• Main Axis (trục chính)
• Cross Axis (trục phụ)

flex-direction: row

1   2   3

Main Axis chạy từ trái sang phải.

Cross Axis chạy từ trên xuống dưới.

flex-direction: column

1
2
3

Main Axis chạy từ trên xuống dưới.

Cross Axis chạy từ trái sang phải.

Ghi nhớ:

• justify-content luôn căn theo Main Axis.
• align-items luôn căn theo Cross Axis.

---

4. display: flex

Bật Flexbox cho container.

.container {
    display: flex;
}

Kết quả:

Item1 Item2 Item3

---

5. flex-direction

Xác định hướng của Main Axis.

.container {
    flex-direction: row;
}

Các giá trị:

• row
• row-reverse
• column
• column-reverse

row

1 2 3

row-reverse

3 2 1

column

1
2
3

column-reverse

3
2
1

---

6. justify-content

Căn các item theo Main Axis.

flex-start

1 2 3

center

      1 2 3

flex-end

                1 2 3

space-between

1          2          3

space-around

  1      2      3

space-evenly

    1     2     3

Ví dụ:

.container {
    display: flex;
    justify-content: space-between;
}

---

7. align-items

Căn các item theo Cross Axis.

.container {
    display: flex;
    align-items: center;
}

Các giá trị:

• stretch
• flex-start
• center
• flex-end

Căn giữa hoàn toàn

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

---

8. gap

Tạo khoảng cách giữa các item.

.container {
    display: flex;
    gap: 20px;
}

Ví dụ:

1     2     3

Hiện nay gap được ưu tiên hơn margin để tạo khoảng cách giữa các phần tử.

---

9. flex-wrap

Cho phép item xuống dòng khi không đủ chỗ.

.container {
    flex-wrap: wrap;
}

Ví dụ:

1 2 3
4 5 6
7 8 9

Các giá trị:

• nowrap
• wrap
• wrap-reverse

---

10. align-content

Chỉ hoạt động khi:

• Có flex-wrap
• Có nhiều dòng
• Container còn khoảng trống

.container {
    flex-wrap: wrap;
    align-content: space-between;
}

align-content dùng để căn các dòng, không phải từng item.

---

11. flex-grow

Cho phép item mở rộng để chiếm phần không gian còn lại.

.left {
    flex-grow: 1;
}

.right {
    flex-grow: 2;
}

Kết quả:

left  = 1 phần
right = 2 phần

---

12. flex-shrink

Cho phép item co lại khi không đủ không gian.

.item {
    flex-shrink: 1;
}

---

13. flex-basis

Kích thước ban đầu của item.

.item {
    flex-basis: 200px;
}

---

14. flex

Thuộc tính shorthand quan trọng nhất của Flex Item.

.item {
    flex: 1;
}

Tương đương:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

Ví dụ chia đều chiều rộng

.item {
    flex: 1;
}

Kết quả:

+-------+-------+-------+
|   1   |   2   |   3   |
+-------+-------+-------+

---

15. order

Thay đổi thứ tự hiển thị mà không cần thay đổi HTML.

.item {
    order: -1;
}

HTML:

A B C

Kết quả:

B A C

---

16. align-self

Ghi đè align-items cho riêng một item.

.item {
    align-self: flex-end;
}

---

17. Ví dụ Navbar Thực Tế

HTML

<nav class="navbar">
    <div>Logo</div>
    <div>Menu</div>
</nav>

CSS

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Kết quả:

LOGO                          MENU

---

18. Ví dụ Layout Sidebar

HTML

<div class="layout">
    <aside class="sidebar"></aside>
    <main class="content"></main>
</div>

CSS

.layout {
    display: flex;
}

.sidebar {
    width: 250px;
}

.content {
    flex: 1;
}

---

19. Tổng Kết Các Thuộc Tính Quan Trọng

Loại	Thuộc tính	Mục đích
Container	display	Bật Flexbox
Container	flex-direction	Xác định Main Axis
Container	justify-content	Căn theo Main Axis
Container	align-items	Căn theo Cross Axis
Container	flex-wrap	Cho phép xuống dòng
Container	gap	Khoảng cách giữa item
Item	flex	Co giãn item
Item	order	Thay đổi thứ tự hiển thị
Item	align-self	Ghi đè align riêng item

---

20. Công Thức Ghi Nhớ Flexbox

• flex-direction → Main Axis nằm ở đâu?
• justify-content → Căn theo Main Axis.
• align-items → Căn theo Cross Axis.
• flex-wrap → Có xuống dòng không?
• align-content → Căn các dòng.
• flex → Item co giãn thế nào?

Chỉ cần nắm vững 6 thuộc tính trên, bạn đã có thể xây dựng phần lớn giao diện web hiện đại bằng Flexbox.