Khóa học IT CSS Cơ bản 032_Bố cục Flexbox

Bố cục Flexbox

Trong một thời gian dài, các công cụ đáng tin cậy và tương thích đa trình duyệt duy nhất để tạo bố cục CSS là float và position. Hai công cụ này hoạt động tốt trong hầu hết các trường hợp, nhưng ở một số khía cạnh, chúng có những hạn chế khiến việc hoàn thành nhiệm vụ trở nên khó khăn.

Các yêu cầu bố cục đơn giản sau đây khó hoặc không thể thực hiện một cách thuận tiện và linh hoạt với các công cụ này (float và position):

• Căn giữa theo chiều dọc một khối nội dung bên trong phần tử cha.
• Làm cho tất cả các phần tử con của container chiếm một lượng chiều rộng/chiều cao bằng nhau, bất kể có bao nhiêu chiều rộng/chiều cao khả dụng.
• Làm cho tất cả các cột trong bố cục nhiều cột có cùng chiều cao, ngay cả khi chúng chứa lượng nội dung khác nhau.

CSS Flexbox là một công cụ bố cục mạnh mẽ trong CSS có thể được sử dụng để tạo các bố cục linh hoạt khác nhau. Để thành thạo CSS Flexbox, bạn cần hiểu các khái niệm sau:

• Flex container (hộp chứa flex): Bố cục Flexbox bao gồm các flex container và flex item. Flex container là hộp chứa đặt các flex item vào bố cục flex. Flex container có thể là bất kỳ phần tử nào, nhưng thường sử dụng phần tử div.
• Flex item (mục flex): Flex item là phần tử được đặt trong flex container. Flex item có thể là bất kỳ phần tử nào, nhưng thường sử dụng phần tử div.
• Trục chính (main axis): Trục chính là hướng ngang hoặc dọc của các phần tử trong bố cục flex.
• Trục chéo (cross axis): Trục chéo là hướng dọc hoặc ngang của các phần tử trong bố cục flex.

Thuộc tính Flex Container

Flex container có các thuộc tính sau để điều khiển bố cục flex:

• display: Đặt chế độ hiển thị của flex container. Flex container phải được đặt thành display: flex hoặc display: inline-flex để sử dụng bố cục flex.
• flex-direction: Đặt hướng trục chính của bố cục flex. Giá trị có thể là flex-start căn theo đầu trục chính, flex-end căn theo cuối trục chính, row sắp xếp ngang trên trục chính, row-reverse sắp xếp ngang ngược trên trục chính, column sắp xếp dọc trên trục chính, column-reverse sắp xếp dọc ngược trên trục chính.
• flex-wrap: Kiểm soát xem các mục trong flex container có xuống dòng hay không. nowrap giá trị mặc định, không xuống dòng, wrap xuống dòng, wrap-reverse xuống dòng ngược.
• flex-flow: Viết tắt của flex-direction và flex-wrap, hai giá trị tương ứng với flex-direction và flex-wrap.
• justify-content: Đặt căn chỉnh của các flex item trên trục chính trong flex container. Giá trị có thể là flex-start căn theo đầu trục chính, flex-end căn theo cuối trục chính, center căn giữa trên trục chính, space-between phân bố đều trên trục chính (căn theo mép container), space-around phân bố đều trên trục chính (khoảng cách giữa các mục bằng nhau), hoặc space-evenly phân bố đều trên trục chính (bao gồm khoảng cách hai đầu bằng nhau).
• align-items: Đặt căn chỉnh của các flex item trên trục chéo trong flex container. Giá trị có thể là flex-start căn theo đầu trục chéo, flex-end căn theo cuối trục chéo, center căn giữa trên trục chéo, stretch giá trị mặc định, hoặc baseline căn theo đường cơ sở văn bản dòng đầu tiên trên trục chéo. Chỉ ảnh hưởng đến các mục con của flex container.
• align-content: Giống như align-items, đây là thuộc tính để kiểm soát căn chỉnh của các mục con trên trục chéo, chỉ có hiệu lực khi flex container có nhiều đường trục (trong trường hợp nhiều hàng hoặc nhiều cột).

Thuộc tính Flex Item

Flex item có các thuộc tính sau để điều khiển bố cục của flex item trong bố cục flex:

• flex-grow: Đặt tỷ lệ mở rộng của flex item trên trục chính. Giá trị có thể là số thực từ 0 đến 1.
• flex-shrink: Đặt tỷ lệ co lại của flex item trên trục chính. Giá trị có thể là số thực từ 0 đến 1.
• flex-basis: Đặt chiều rộng hoặc chiều cao mặc định của flex item trên trục chính. Giá trị có thể là giá trị độ dài, giá trị phần trăm hoặc auto.
• order: Đặt thứ tự của flex item trên trục chính. Giá trị có thể là số nguyên từ 1 đến 65535.

Ví dụ:

1
/* Kiểu flex container */
2
.flex-container {
3
    display: flex;
4
    flex-direction: row; /* Hướng trục chính là ngang */
5
    justify-content: space-around; /* Căn chỉnh trên trục chính */
6
    align-items: center; /* Căn chỉnh trên trục chéo */
7
    height: 200px; /* Đặt chiều cao container */
8
    border: 2px solid #333; /* Thêm viền để hiển thị rõ hơn */
9
}
10
/* Kiểu flex item */
11
.flex-item {
12
    flex: 1; /* Phân bố đều không gian trục chính */
13
    text-align: center;
14
    padding: 20px;
15
    background-color: #f2f2f2;
16
}

1
<!-- Flex container -->
2
<div class="flex-container">
3
    <!-- Flex item 1 -->
4
    <div class="flex-item">Item 1</div>
5
    <!-- Flex item 2 -->
6
    <div class="flex-item">Item 2</div>
7
    <!-- Flex item 3 -->
8
    <div class="flex-item">Item 3</div>
9
</div>

Hiệu ứng: