Hướng flex - Thủ thuật CSS

Các flex-directionbất động sản là một tiểu tài sản của các mô-đun linh hoạt Box Layout.

Nó thiết lập trục chính, do đó xác định hướng các mục flex được đặt trong vùng chứa flex.

Nhắc nhở: trục chính của thùng chứa flex là trục chính mà các mục flex được bố trí. Hãy coi chừng, nó không nhất thiết phải nằm ngang; nó phụ thuộc vào flex-directiontài sản.

Chỗ flex-directionnghỉ chấp nhận 4 giá trị khác nhau:

row( mặc định ): giống như hướng văn bản
row-reverse: ngược lại với hướng văn bản
column: giống như rownhưng từ trên xuống dưới
column-reverse: giống như row-reversetrên xuống dưới

Lưu ý rằng rowvà row-reversebị ảnh hưởng bởi hướng của thùng chứa uốn. Nếu hướng văn bản của nó là ltr, rowthể hiện trục hoành được định hướng từ trái sang phải và row-reversetừ phải sang trái; nếu hướng rtlthì ngược lại.

Cú pháp

flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )

Bản giới thiệu

Trong bản demo sau:

Danh sách đỏ được đặt thành row
Danh sách màu vàng được đặt thành row-reverse
Danh sách màu xanh được đặt thành column
Danh sách xanh được đặt thành column-reverse

Lưu ý: Hướng văn bản chưa được chỉnh sửa.

Kiểm tra cây bút này!

Vì vậy, về cơ bản, bạn sẽ sử dụng rowtrong hầu hết các trường hợp, hoặc columntrong một số trường hợp nhất định. Nếu không, nó là khá phổ biến để đảo ngược thứ tự hướng.

Hỗ trợ trình duyệt

(hiện đại) có nghĩa là cú pháp gần đây từ đặc tả (ví dụ display: flex;)
(hybrid) có nghĩa là một cú pháp không chính thức kỳ lạ từ năm 2011 (ví dụ display: flexbox;:)
(cũ) có nghĩa là cú pháp cũ từ năm 2009 (ví dụ display: box;)

Trình duyệt Chrome	Safari	Firefox	Opera	I E	Android	iOS
21+ (hiện đại) 20- (cũ)	3.1+ (cũ)	2-21 (cũ) 22+ (mới)	12.1+ (hiện đại)	10+ (kết hợp)	2.1+ (cũ)	3.2+ (cũ)

Trình duyệt Blackberry 10+ hỗ trợ cú pháp mới.

Để biết thêm thông tin về cách kết hợp các cú pháp để nhận được hỗ trợ trình duyệt tốt nhất, vui lòng tham khảo bài viết này (CSS-Tricks) hoặc bài viết này (DevOpera).