🌟 Cách sử dụng Flexbox hiệu quả: 4 tình huống thường gặp trong CSS

[kemntas]

Flexbox là một trong những công cụ mạnh nhất trong CSS hiện nay, giúp căn chỉnh phần tử nhanh, gọn và trực quan hơn rất nhiều so với float hay inline-block trước đây. Tuy nhiên, không phải ai cũng tận dụng Flexbox đúng cách. Dưới đây là 4 tình huống mà mình thường xuyên áp dụng Flexbox trong thực tế.
---

🔧 1. Căn giữa tuyệt đối cả chiều ngang và dọc
Đây là nhu cầu rất phổ biến khi dựng UI.
CSS mẫu:

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

Chỉ với hai dòng, phần tử con sẽ nằm chính giữa hoàn hảo, không cần margin hay transform.
---

📐 2. Tạo khoảng cách giữa các phần tử ngang bằng nhau
Nhiều bạn dùng margin cho từng item, nhưng Flexbox có gap cực tiện:

.menu {
display: flex;
gap: 12px;
}

gap dễ đọc, dễ quản lý và tương thích rất tốt với trình duyệt hiện nay.
---

🪝 3. Đẩy một phần tử sang phía cuối dòng
Ví dụ: logo bên trái – menu ở giữa – nút đăng nhập nằm sát bên phải.

.header {
display: flex;
}
.login-btn {
margin-left: auto;
}

margin-left: auto là mẹo rất hiệu quả trong layout linh hoạt.
---

📦 4. Chia layout theo tỷ lệ thay vì cố định pixel
Không cần dùng width: 33.333% hay tính toán thủ công.

.wrapper {
display: flex;
}
.left {
flex: 2; /* chiếm 2 phần */
}
.right {
flex: 1; /* chiếm 1 phần */
}

Flexbox tự tính toán phần còn lại cho bạn.
---

🎯 Kết luận

Flexbox không chỉ giúp tiết kiệm thời gian mà còn làm cho layout dễ thích ứng hơn khi chuyển sang mobile hay tablet. Nếu bạn mới bắt đầu học CSS, Flexbox chắc chắn là nền tảng không thể bỏ qua.

Mình rất mong nghe thêm kinh nghiệm của anh em trong diễn đàn – ai có mẹo hay với Flexbox cứ chia sẻ nhé!