Flexbox là gì?

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 44 trên 76.

Trong CSS, bố cục Flexbox là công cụ mạnh mẽ giúp căn chỉnh và phân phối khoảng trống giữa các mục trong vùng chứa một cách hiệu quả. Với Flexbox, bạn có thể kiểm soát cách căn chỉnh, hướng, thứ tự và kích thước của các phần tử trong vùng chứa, tạo ra bố cục linh hoạt, năng động và thích ứng với nhiều kích thước màn hình cũng như thiết bị khác nhau.

Để sử dụng Flexbox, trước tiên bạn cần tạo một vùng chứa flex. Bạn thực hiện việc này bằng cách đặt thuộc tính display của một phần tử thành flex hoặc inline-flex. Sau khi tạo vùng chứa flex, các phần tử con trực tiếp của nó sẽ tự động trở thành các mục flex.

Đây là cú pháp cơ bản để tạo một vùng chứa flex:

.container {
    display: flex;
}

display: flex;: Khai báo này biến phần tử được chọn thành vùng chứa flex và các phần tử con trực tiếp của nó thành các mục flex.

Sau khi có một vùng chứa flex, bạn có thể dùng nhiều thuộc tính Flexbox để điều khiển bố cục của các mục flex bên trong. Một số thuộc tính được dùng phổ biến nhất gồm:

flex-direction: Xác định hướng của các phần tử flex (row, column, row-reverse, column-reverse).
justify-content: Căn chỉnh các phần tử flex dọc theo trục chính (ví dụ: flex-start, flex-end, center, space-between, space-around).

align-items: Căn chỉnh các phần tử flex dọc theo trục chéo (ví dụ: flex-start, flex-end, center, baseline, stretch).
flex-wrap: Kiểm soát việc các phần tử flex có xuống nhiều dòng hay không (wrap, nowrap, wrap-reverse).
align-content: Căn chỉnh các dòng flex khi có khoảng trống thừa trên trục chéo (tương tự justify-content nhưng dành cho nhiều dòng).

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có một phần tử chia (<div>) chứa ba phần tử chia con (<div>). Nhiệm vụ của bạn là dùng thuộc tính display: flex; để biến phần tử chia cha thành một vùng chứa flex. Làm theo các bước sau:

Viết một quy tắc CSS nhắm đến phần tử <div> có lớp container.
Đặt thuộc tính display của phần tử .container thành flex.

Tự làm thử

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>