Thuộc tính flex-grow của CSS

Đị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;}

Thử ngay

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