Thuộc tính flex-direction của CSS

Định nghĩa và cách sử dụng

Thuộc tính flex-direction quy định hướng của phần tử co giãn.

Ghi chú：Nếu phần tử không phải là phần tử co giãn, thì thuộc tính flex không có giá trị.

Xem thêm:

Hướng dẫn CSS:Khung làm việc CSS

Hướng dẫn CSS:Thuộc tính flex

Hướng dẫn CSS:Thuộc tính flex-basis

Hướng dẫn CSS:Thuộc tính flex-flow

Hướng dẫn CSS:Thuộc tính flex-grow

Hướng dẫn CSS:Thuộc tính flex-shrink

Hướng dẫn CSS:Thuộc tính flex-wrap

Hướng dẫn HTML DOM:Thuộc tính flexDirection

Ví dụ

Đặt hướng của các phần tử 弹 tính trong phần tử <div> theo thứ tự ngược lại:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Thử ngay

Ngôn ngữ CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
row Giá trị mặc định. Hiển thị các phần tử 弹性 theo hàng ngang.
row-reverse Hàng ngang, nhưng hướng ngược lại.
column Hiển thị các phần tử 弹性 theo hàng dọc.
column-reverse Hàng ngang, nhưng hướng ngược lại.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial。
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit。

Chi tiết kỹ thuật

Giá trị mặc định: row
Kế thừa: Không
Tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation。
Phiên bản: CSS3
Ngôn ngữ lập trình JavaScript: object.style.flexDirection="column-reverse"

Các ví dụ khác

Kết hợp flex-direction và truy vấn truyền thông để tạo layout khác nhau cho các kích thước màn hình/đevice khác nhau:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Lập kế hoạch phản hồi - Tạo layout một cột (100％) thay vì layout hai cột (50％) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Thử ngay

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số liệu với tiền tố -webkit- hoặc -moz- biểu thị phiên bản đầu tiên sử dụng tiền tố.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0