Thuộc tính flex-grow

Thuộc tính flex-grow xác định mức độ một khối flex riêng lẻ có thể lớn hơn các phần tử lân cận nếu cần thiết.

Ví dụ, nếu tất cả các khối flex bên trong container flex có flex-grow:1, thì chúng sẽ có cùng kích thước. Nếu một trong số chúng có flex-grow:2, thì nó sẽ lớn gấp 2 lần so với tất cả phần còn lại.

Nếu tổng chiều rộng của các phần tử nhỏ hơn chiều rộng của phần tử cha, nên sẽ còn không gian trống ở bên phải. Nếu muốn, không gian trống này có thể được chia tỷ lệ giữa các phần tử của chúng ta. Điều này được thực hiện bằng thuộc tính flex-grow, được đặt cho các phần tử flex. Giá trị của thuộc tính này là một số không có đơn vị.

Áp dụng cho: một khối flex cụ thể.

Thuộc tính này là một phần của thuộc tính viết tắt flex.

Cú pháp

bộ chọn {
	flex-grow: số dương;
}

Giá trị mặc định: 0.

Ví dụ

Hiện tại chúng ta có hai khối flex với chiều rộng 100px. Tổng chiều rộng của chúng là 200px, còn chiều rộng của phần tử cha là 300px. Kết quả là còn không gian trống 100px.

Nếu các phần tử không được đặt flex-grow, thì chúng ta sẽ chỉ thấy không gian trống này. Nếu nó được đặt, thì chiều rộng thực tế của các phần tử sẽ lớn hơn giá trị đã đặt - chúng sẽ chia tỷ lệ không gian trống với nhau và thêm nó vào chiều rộng của mình.

Ví dụ, phần tử thứ nhất có flex-grow bằng 1, còn phần tử thứ hai - 3. Hãy tính toán xem mỗi phần tử sẽ nhận được bao nhiêu phần không gian trống.

Đầu tiên cần lấy tổng số đơn vị flex-grow của tất cả các phần tử của chúng ta. Phần tử thứ nhất có giá trị là 1, và phần tử thứ hai - 3. Điều này có nghĩa là tổng của chúng bằng 4.

Bây giờ chia 100px không gian trống cho 4 và ta được 25px cho một đơn vị flex-grow. Kết quả là, phần tử thứ nhất sẽ được thêm một đơn vị flex-grow, tức là 25px, còn phần tử thứ hai - ba đơn vị, tức là 75px.

Chiều rộng của phần tử thứ nhất sẽ là 125px, còn phần tử thứ hai - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 3;
}

Ví dụ

Bây giờ giả sử chiều rộng của phần tử cha là 400px, chiều rộng của phần tử thứ nhất là 200px, còn chiều rộng của phần tử thứ hai là 100px. Kết quả là, không gian trống lại bằng 100px.

Hãy đặt flex-grow cho mỗi phần tử, bằng 1. Tổng sẽ là 2, tức là 100px không gian trống cần chia cho 2. Kết quả là, 50px cho một đơn vị tính tham lam.

Vì tất cả các phần tử có cùng giá trị flex-grow, nên tất cả các phần tử sẽ được thêm cùng một giá trị là 50px. Điều này có nghĩa là, phần tử thứ nhất sẽ trở thành 250px, và phần tử thứ hai sẽ trở thành 150px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Ví dụ

Giả sử lại chiều rộng của phần tử cha là 400px, chiều rộng của phần tử thứ nhất là 200px, còn chiều rộng của phần tử thứ hai là 100px.

Bây giờ hãy đặt cho phần tử thứ nhất flex-grow có giá trị 3, còn phần tử thứ hai - giá trị 1. Kết quả là tổng tính tham lam bằng 4. Khi đó một đơn vị tính tham lam bằng 100px / 4 = 25px.

Phần tử thứ nhất sẽ được thêm 75px, và nó sẽ trở thành 275px, còn phần tử thứ hai - 25px, nó sẽ trở thành 125px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Xem thêm

thuộc tính flex-direction,
thiết lập hướng của các trục cho các khối flex
thuộc tính justify-content,
thiết lập căn chỉnh dọc theo trục chính
thuộc tính align-items,
thiết lập căn chỉnh dọc theo trục phụ
thuộc tính flex-wrap,
thiết lập tính đa dòng cho các khối flex
thuộc tính flex-flow,
viết tắt cho flex-direction và flex-wrap
thuộc tính order,
thiết lập thứ tự của các khối flex
thuộc tính align-self,
thiết lập căn chỉnh cho một khối cụ thể
thuộc tính flex-basis,
thiết lập kích thước cho một khối flex cụ thể
thuộc tính flex-shrink,
thiết lập khả năng co lại của các khối flex
thuộc tính flex,
viết tắt cho flex-grow, flex-shrink và flex-basis