Flex-flow - Thủ thuật CSS

Anonim

Các flex-flowbấ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ó là cách viết tắt của flex-directionvà flex-wrap.

Cú pháp

flex-flow: || .flex-container ( flex-flow: row wrap; )

Bạn có thể chỉ định một hoặc hai giá trị, bất kể thứ tự.

Bản giới thiệu

Cả hai danh sách hoạt động theo cùng một cách:

  • Màu xanh lam có flex-direction: rowvàflex-wrap: wrap
  • Cái màu đỏ có flex-flow: row wrap
Kiểm tra cây bút này!

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).