Các flex-growbấ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ó xác định khả năng cho một mục linh hoạt phát triển nếu cần thiết. Nó chấp nhận một giá trị không đơn vị đóng vai trò như một tỷ lệ. Nó chỉ định lượng không gian có sẵn bên trong hộp linh hoạt mà mặt hàng sẽ chiếm.
Ví dụ: nếu tất cả các mục được flex-growđặt thành 1, mọi trẻ em sẽ đặt thành một kích thước bằng nhau bên trong hộp chứa. Nếu bạn cho một trong hai đứa trẻ có giá trị là 2, đứa trẻ đó sẽ chiếm gấp đôi không gian so với những đứa trẻ khác.
Cú pháp
flex-grow: .flex-item ( flex-grow: 2; )Bản giới thiệu
Bản demo sau đây cho thấy cách tính không gian còn lại theo các giá trị khác nhau của flex-grow(xem trên CodePen để hiểu rõ hơn).
Tất cả các mục có flex-growgiá trị là 1 ngoại trừ mục thứ 3 có flex-growgiá trị là 2. Có nghĩa là khi không gian khả dụng được phân phối, mục linh hoạt thứ 3 sẽ có gấp đôi dung lượng so với các mục khác.
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).