Các flexbất động sản là một tiểu tài sản của các mô-đun linh hoạt Box Layout.
Đây là cách viết tắt của flex-grow, flex-shrinkvà flex-basis. Tham số thứ hai và thứ ba ( flex-shrinkvà flex-basis) là tùy chọn.
Cú pháp
flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )Dưới đây là tin tức sốt dẻo về những gì các giá trị ánh xạ đến tùy thuộc vào số lượng giá trị bạn cung cấp cho nó:
flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inheritCác giá trị chung cho flex
flex: 0 auto;
Đây là giống như flex: initial;và viết tắt cho các giá trị mặc định: flex: 0 1 auto. Nó định kích thước mục dựa trên width/ heightthuộc tính của nó (hoặc nội dung của nó nếu không được đặt).
Nó làm cho mục linh hoạt không linh hoạt khi còn một số không gian trống, nhưng cho phép nó thu nhỏ đến mức tối thiểu khi không có đủ không gian. Khả năng căn chỉnh hoặc autolề có thể được sử dụng để căn chỉnh các mục linh hoạt dọc theo trục chính.
flex: tự động;
Điều này tương đương với flex: 1 1 auto. Lưu ý, đây không phải là giá trị mặc định. Nó định kích thước mục dựa trên width/ heightthuộc tính của nó , nhưng làm cho nó hoàn toàn linh hoạt để chúng hấp thụ bất kỳ không gian thừa nào dọc theo trục chính.
Nếu tất cả các mục là một trong hai flex: auto, flex: initialhoặc flex: none, bất kỳ không gian còn lại sau khi các mặt hàng đã được kích thước sẽ được phân phối đồng đều cho các mục với flex: auto.
flex: không có;
Điều này tương đương với flex: 0 0 auto. Nó định cỡ mục theo width/ heightthuộc tính của nó , nhưng làm cho nó hoàn toàn không linh hoạt.
Điều này tương tự như flex: initialngoại trừ nó không được phép thu nhỏ, ngay cả trong tình huống tràn.
flex:
Tương đương với flex: 1 0px. Nó làm cho mục linh hoạt và đặt cơ sở uốn bằng 0, dẫn đến mục nhận được tỷ lệ xác định của không gian còn lại.
Nếu tất cả các mặt hàng trong container flex sử dụng mẫu này, thì kích thước của chúng sẽ tỷ lệ với hệ số flex được chỉ định.
Bản giới thiệu
Bản trình diễn sau đây cho thấy một bố cục rất đơn giản với Flexbox nhờ thuộc flextính:
Đây là đoạn mã thú vị:
.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )Đầu tiên, chúng tôi đã cho phép các mục linh hoạt được hiển thị trên nhiều hàng với flex-flow: row wrap.
Sau đó, chúng tôi yêu cầu cả đầu trang và chân trang chiếm 100% chiều rộng khung nhìn hiện tại, bất kể điều gì.
Và nội dung chính và cả hai thanh bên sẽ chia sẻ cùng một hàng, chia sẻ không gian còn lại như sau: 66% (2 / (1 + 2)) cho nội dung chính, 33% (1 / (1 + 2)) cho thanh bên .
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 để đượ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).