flex-direction
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Thuộc tính CSS flex-direction xác định cách các flex item được sắp xếp bên trong flex container, định nghĩa trục chính và hướng sắp xếp (thuận chiều hoặc ngược chiều).
Try it
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
display: flex;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
width: 60px;
margin: 10px;
}
Lưu ý rằng các giá trị row và row-reverse bị ảnh hưởng bởi hướng chữ viết của flex container. Nếu thuộc tính dir của container là ltr, row đại diện cho trục nằm ngang từ trái sang phải, và row-reverse từ phải sang trái; nếu thuộc tính dir là rtl, row đại diện cho trục từ phải sang trái, và row-reverse từ trái sang phải.
Cú pháp
/* Hướng bố trí văn bản theo dòng */
flex-direction: row;
/* Giống <row>, nhưng ngược chiều */
flex-direction: row-reverse;
/* Hướng xếp chồng các dòng văn bản */
flex-direction: column;
/* Giống <column>, nhưng ngược chiều */
flex-direction: column-reverse;
/* Giá trị toàn cục */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;
Giá trị
Các giá trị được chấp nhận gồm:
row-
Trục chính của flex container được xác định giống với hướng văn bản. Điểm main-start và main-end trùng với hướng nội dung.
row-reverse-
Hoạt động giống
rownhưng điểm main-start và main-end ngược lại so với hướng nội dung. column-
Trục chính của flex container là trục khối. Điểm main-start và main-end tương ứng với các điểm before và after của chế độ viết (writing-mode).
column-reverse-
Hoạt động giống
columnnhưng điểm main-start và main-end ngược lại so với hướng nội dung.
Khả năng tiếp cận
Sử dụng thuộc tính flex-direction với giá trị row-reverse hoặc column-reverse sẽ tạo ra sự không khớp giữa trình bày trực quan của nội dung và thứ tự trong DOM. Điều này ảnh hưởng tiêu cực đến người dùng có thị lực kém khi điều hướng với sự trợ giúp của công nghệ hỗ trợ như trình đọc màn hình. Nếu thứ tự trực quan (CSS) quan trọng, thì người dùng trình đọc màn hình sẽ không có quyền truy cập vào thứ tự đọc chính xác.
Định nghĩa hình thức
| Initial value | row |
|---|---|
| Applies to | flex containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
flex-direction =
row |
row-reverse |
column |
column-reverse
Ví dụ
Đảo ngược cột và hàng flex container
HTML
<h4>This is a Column-Reverse</h4>
<div id="col-rev" class="content">
<div class="box red">A</div>
<div class="box lightblue">B</div>
<div class="box yellow">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="row-rev" class="content">
<div class="box red">A</div>
<div class="box lightblue">B</div>
<div class="box yellow">C</div>
</div>
CSS
.content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
}
.box {
width: 50px;
height: 50px;
}
#col-rev {
flex-direction: column-reverse;
}
#row-rev {
flex-direction: row-reverse;
}
.red {
background-color: red;
}
.lightblue {
background-color: lightblue;
}
.yellow {
background-color: yellow;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-direction-property |
Tương thích trình duyệt
Xem thêm
- Thuộc tính viết tắt CSS
flex-flowcho các thuộc tínhflex-directionvàflex-wrap. - Khái niệm cơ bản về flexbox
- Sắp xếp thứ tự các flex item