Hướng flex

Trong CSS, thuộc tính flex-direction kiểm soát hướng sắp xếp các phần tử bên trong vùng chứa flex. Thuộc tính này quyết định các phần tử được xếp thành hàng hay cột.

Điều này cũng ảnh hưởng đến cách các thuộc tính như justify-content và align-items hoạt động. Dùng flex-direction đúng cách giúp bạn xây dựng bố cục linh hoạt và thích ứng.

Đây là cú pháp cơ bản để sử dụng thuộc tính flex-direction:

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

value: Hướng mong muốn của các mục flex, có thể là một trong những giá trị sau:

• row: Đây là giá trị mặc định. Các phần tử flex được xếp thành một hàng từ trái sang phải. Trục chính nằm ngang, còn trục phụ thẳng đứng.

• row-reverse: Các mục Flex được sắp xếp thành một hàng, từ phải sang trái. Trục chính nằm ngang và trục phụ thẳng đứng.

• column: Các phần tử flex được xếp thành một cột, từ trên xuống dưới. Trục chính theo chiều dọc, còn trục chéo theo chiều ngang.

• column-reverse: Các phần tử Flex (flex items) được xếp thành một cột, từ dưới lên trên. Trục chính (main axis) nằm dọc, còn trục phụ (cross axis) nằm ngang.

Ví dụ:

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

.container-row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

Trong ví dụ này, phần tử .container-row sẽ hiển thị các mục flex theo hàng từ trái sang phải, còn phần tử .container-row-reverse sẽ hiển thị chúng từ phải sang trái.