Thuộc tính flex-grow của CSS
- Trang trước flex-flow
- Trang sau flex-shrink
Định nghĩa và cách sử dụng
Thuộc tính flex-grow quy định lượng tăng thêm của mục so với các mục弹性 khác trong cùng容器.
Ghi chú:Nếu phần tử không phải là mục弹性, thuộc tính flex sẽ không có giá trị.
Xem thêm:
Giáo trình CSS: Hộp弹性 CSS
Hướng dẫn CSS:Thuộc tính flex
Hướng dẫn CSS:Thuộc tính flex-basis
Hướng dẫn CSS:Thuộc tính flex-direction
Hướng dẫn CSS:Thuộc tính flex-flow
Hướng dẫn CSS:Thuộc tính flex-shrink
Hướng dẫn CSS:Thuộc tính flex-wrap
Hướng dẫn HTML DOM:Thuộc tính flexGrow
Mô hình
Làm cho chiều rộng của mục弹性项目 thứ hai là ba lần chiều rộng của các mục弹性项目 khác:
div:nth-of-type(1) {flex-grow: 1;} div:nth-of-type(2) {flex-grow: 3;} div:nth-of-type(3) {flex-grow: 1;}
Cú pháp CSS
flex-grow: number|initial|inherit;
Giá trị thuộc tính
Giá trị | Mô tả |
---|---|
number | Giá trị số, quy định lượng tăng thêm của mục này so với các mục弹性项目 khác. Mặc định là 0. |
initial | Đặt thuộc tính này về giá trị mặc định. Xem thêm initial. |
inherit | Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit. |
Chi tiết kỹ thuật
Giá trị mặc định: | 0 |
---|---|
Kế thừa: | Không |
Chế tạo animation: | Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation. |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object.style.flexGrow="5" |
Hỗ trợ trình duyệt
Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.
Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này. Sử dụng tiền tố theo quy định của số đầu tiên trước khi sử dụng -webkit-、-ms- hoặc -moz-.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
- Trang trước flex-flow
- Trang sau flex-shrink