Thuộc tính phát triển linh hoạt trong CSS
Thí dụ
Để mục linh hoạt thứ hai phát triển rộng hơn ba lần so với phần còn lại:
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
Định nghĩa và Cách sử dụng
Thuộc flex-grow
tính chỉ định mục sẽ tăng bao nhiêu so với phần còn lại của các mục linh hoạt bên trong cùng một vùng chứa.
Lưu ý: Nếu phần tử không phải là một mục linh hoạt, thuộc flex-grow
tính không có hiệu lực.
Giá trị mặc định: | 0 |
---|---|
Thừa hưởng: | không |
Hoạt hình: | Đúng. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.flexGrow = "5" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
flex-grow | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Cú pháp CSS
flex-grow: number|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
number | A number specifying how much the item will grow relative to the rest of the flexible items. Default value is 0 | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các trang liên quan
Hướng dẫn CSS: Hộp linh hoạt CSS
Tham chiếu CSS: thuộc tính flex
Tham chiếu CSS: thuộc tính flex-base
Tham chiếu CSS: thuộc tính flex-direction
Tham chiếu CSS: thuộc tính flex-flow
Tham chiếu CSS: thuộc tính flex-co
Tham chiếu CSS: thuộc tính flex-wrap
Tham chiếu DOM HTML: thuộc tính flexGrow