Flexbox - Căn chỉnh và sắp xếp phần tử

Flexbox là một hệ thống bố cục mạnh mẽ trong CSS giúp căn chỉnh và sắp xếp phần tử một cách linh hoạt. Trong bài học này, chúng ta sẽ tìm hiểu về cách sử dụng Flexbox, các thuộc tính quan trọng và cách Bootstrap hỗ trợ để dễ dàng triển khai trong dự án thực tế.

1. Giới thiệu về Flexbox

Flexbox (Flexible Box) giúp sắp xếp các phần tử con trong một phần tử cha một cách linh hoạt, giúp giao diện dễ dàng thích nghi với nhiều kích thước màn hình khác nhau.

1.1. Kích hoạt Flexbox

Flexbox được kích hoạt bằng cách đặt display: flex cho phần tử cha.

Ví dụ:

div {
    display: flex;
}

1.2. Justify-content (Căn chỉnh theo chiều ngang)

Dùng để căn chỉnh các phần tử theo trục chính (main axis).

Ví dụ:

div {
    display: flex;
    justify-content: center; /* Căn giữa */
}

1.3. Align-items (Căn chỉnh theo chiều dọc)

Dùng để căn chỉnh phần tử theo trục phụ (cross axis).

Ví dụ:

div {
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
}

2. Bootstrap hỗ trợ Flexbox như thế nào?

Bootstrap cung cấp các lớp tiện ích để sử dụng Flexbox dễ dàng hơn:

• .d-flex → Kích hoạt Flexbox.
• .justify-content-start → Căn lề trái.
• .justify-content-center → Căn giữa theo chiều ngang.
• .justify-content-end → Căn lề phải.
• .justify-content-between → Giãn đều.
• .align-items-start → Căn trên.
• .align-items-center → Căn giữa theo chiều dọc.
• .align-items-end → Căn dưới.

Ví dụ sử dụng Bootstrap:

<div class="d-flex justify-content-between align-items-center bg-light p-3">
    <div>Logo</div>
    <div>Menu</div>
</div>

Lợi ích của Bootstrap: Giúp triển khai bố cục nhanh hơn mà không cần viết nhiều dòng CSS.

3. Bài tập thực hành

Bài tập:

1. Tạo một thanh điều hướng có logo bên trái, menu ở giữa và một nút đăng nhập bên phải.
2. Sử dụng CSS thuần để căn chỉnh các phần tử bằng Flexbox.
3. Áp dụng Bootstrap để làm điều tương tự và so sánh cách làm.
4. Kiểm tra tính linh hoạt trên các kích thước màn hình khác nhau.

4. Kết luận

Qua bài học này, bạn đã hiểu cách sử dụng Flexbox để căn chỉnh phần tử và cách Bootstrap hỗ trợ điều này. Flexbox giúp tạo bố cục linh hoạt, dễ điều chỉnh và phù hợp với thiết kế web hiện đại.