CSS Flexbox (hay còn gọi là Flexible Box Layout) là một công cụ mạnh mẽ cho phép bạn dễ dàng sắp xếp, căn chỉnh và phân phối không gian giữa các phần tử trong một container. Flexbox được thiết kế để cung cấp bố cục linh hoạt hơn trong việc tạo các giao diện responsive (phản hồi nhanh) mà không cần sử dụng float hoặc các thuộc tính bố cục phức tạp khác.

Bài viết này là một phần trong chuỗi học CSS trên "codetuthub.com", cùng với các chủ đề như CSS Grid, CSS Layouts, và CSS Positioning.

1. Tổng quan về CSS Flexbox

Flexbox bao gồm một flex container (container linh hoạt) chứa các flex item (phần tử linh hoạt) bên trong. Flex container là phần tử bố trí chính, trong khi các phần tử con của nó là các phần tử sẽ được điều chỉnh vị trí và kích thước.

Cách thiết lập Flexbox

Để biến một phần tử thành flex container, bạn chỉ cần đặt display: flex vào phần tử đó.

.container {
    display: flex;
}

Sau khi được thiết lập, các phần tử con bên trong container sẽ trở thành flex item và có thể sắp xếp theo nhiều cách khác nhau.

2. Các thuộc tính chính của Flex Container

2.1 flex-direction

flex-direction xác định hướng sắp xếp của các flex item bên trong container. Có 4 giá trị phổ biến:

• row (mặc định): Sắp xếp các item theo hàng ngang.
• row-reverse: Sắp xếp các item theo hàng ngang nhưng đảo ngược.
• column: Sắp xếp các item theo cột dọc.
• column-reverse: Sắp xếp các item theo cột dọc nhưng đảo ngược.

.container {
    display: flex;
    flex-direction: row; /* hoặc row-reverse, column, column-reverse */
}

2.2 justify-content

justify-content căn chỉnh các flex item dọc theo trục chính (horizontal nếu flex-direction là row). Có các giá trị phổ biến:

• flex-start (mặc định): Canh lề trái.
• flex-end: Canh lề phải.
• center: Căn giữa.
• space-between: Các item cách đều nhau, item đầu ở lề trái và item cuối ở lề phải.
• space-around: Các item cách nhau đều nhưng có khoảng cách nhỏ hơn ở hai đầu.

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

2.3 align-items

align-items căn chỉnh các flex item theo trục chéo (vertical nếu flex-direction là row). Các giá trị phổ biến:

• stretch (mặc định): Item sẽ giãn ra để vừa với chiều cao của container.
• flex-start: Canh đầu container (trên cùng nếu flex-direction là row).
• flex-end: Canh cuối container (dưới cùng nếu flex-direction là row).
• center: Căn giữa theo chiều dọc.

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

2.4 flex-wrap

flex-wrap cho phép các flex item xuống dòng khi không đủ không gian theo chiều chính.

• nowrap (mặc định): Các item sẽ không xuống dòng.
• wrap: Các item sẽ xuống dòng khi không còn đủ không gian.
• wrap-reverse: Các item xuống dòng ngược lại.

.container {
    display: flex;
    flex-wrap: wrap;
}

3. Các thuộc tính chính của Flex Item

3.1 flex-grow

flex-grow xác định khả năng mở rộng của một flex item để chiếm thêm không gian trống. Giá trị mặc định là 0, tức là không mở rộng.

.item {
    flex-grow: 1;
}

Trong ví dụ này, các item sẽ chia đều không gian còn trống. Nếu item khác có flex-grow: 2, nó sẽ chiếm gấp đôi không gian của các item có flex-grow: 1.

3.2 flex-shrink

flex-shrink xác định khả năng thu nhỏ của một item khi không gian không đủ. Giá trị mặc định là 1, tức là item sẽ thu nhỏ khi cần.

.item {
    flex-shrink: 2;
}

Item này sẽ thu nhỏ nhanh hơn item có flex-shrink: 1 khi không đủ không gian.

3.3 flex-basis

flex-basis xác định kích thước ban đầu của một item trước khi áp dụng flex-grow và flex-shrink. Có thể dùng giá trị px, %, hoặc auto.

.item {
    flex-basis: 200px;
}

Trong ví dụ này, mỗi item sẽ có chiều rộng ban đầu là 200px.

3.4 align-self

align-self cho phép căn chỉnh một item theo trục chéo, ghi đè align-items của container.

• auto (mặc định): Item sử dụng align-items của container.
• flex-start, flex-end, center, baseline, stretch: Căn chỉnh linh hoạt theo từng item.

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

4. Ví dụ thực tế về Flexbox

4.1 Tạo bố cục hàng ngang với Flexbox

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

Ở đây, .nav sẽ sắp xếp các item theo hàng ngang với khoảng cách đều và item giữa sẽ được căn giữa theo chiều dọc.

4.2 Tạo bố cục lưới sản phẩm với Flexbox

.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product-item {
    flex: 1 1 calc(33.333% - 20px);
    box-sizing: border-box;
}

Trong ví dụ này:

• .product-grid sắp xếp các item theo dạng lưới có khoảng cách giữa các item.
• Các item .product-item sẽ chiếm một phần ba chiều rộng của container nhưng vẫn xuống dòng khi không gian hẹp.

4.3 Tạo bố cục responsive với Flexbox

.container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

Trong ví dụ này, .container sẽ sắp xếp các item theo cột trên màn hình nhỏ và chuyển sang hàng ngang khi kích thước màn hình lớn hơn 768px.

5. Flex Shorthand: flex

flex là một thuộc tính viết gọn kết hợp flex-grow, flex-shrink, và flex-basis. Cú pháp:

.item {
    flex: grow shrink basis;
}

Ví dụ:

.item {
    flex: 1 1 200px;
}

Trong ví dụ này, flex: 1 1 200px tương đương với:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 200px

6. So sánh CSS Flexbox và CSS Grid

Flexbox phù hợp khi bạn cần bố cục hàng ngang hoặc cột dọc, trong khi CSS Grid phù hợp cho các bố cục phức tạp hơn với hàng và cột.

7. Kết luận

CSS Flexbox là một công cụ cực kỳ mạnh mẽ và linh hoạt, giúp bạn dễ dàng tạo ra các bố cục responsive và cân chỉnh các phần tử trong container một cách nhanh chóng và hiệu quả. Bằng cách hiểu rõ các thuộc tính của Flexbox, bạn có thể tạo ra những bố cục đẹp mắt, nhất quán và phù hợp trên mọi thiết bị. Để học thêm về các kỹ thuật CSS khác trong quản lý bố cục, hãy xem các bài viết khác trên "codetuthub.com" như CSS Grid, CSS Layouts, và CSS Positioning.