Độ co giãn bằng 0 của các phần tử Flex trong CSS

Nếu flex-grow bằng không đối với một phần tử nào đó, thì phần tử đó sẽ không tham gia vào việc phân phối không gian trống. Theo mặc định, độ co giãn có giá trị bằng không và đó là lý do tại sao các phần tử không được đặt flex-grow sẽ không chia sẻ không gian trống với nhau.

Hãy thực hiện một phép tính ví dụ. Giả sử chúng ta có ba phần tử flex, mỗi phần tử có chiều rộng là 100px. Giả sử phần tử thứ nhất không có flex-grow (hoặc nó bằng 0), phần tử thứ hai có flex-grow bằng 2, và phần tử thứ ba bằng 3.

Giả sử chiều rộng của phần tử cha là 500px. Khi đó, không gian trống sẽ bằng 200px, và một đơn vị flex-grow sẽ tương ứng với 200px / 5 = 40px. Kết quả là, chiều rộng của phần tử thứ nhất sẽ vẫn là 100px, vì nó không tham gia phân phối, chiều rộng của phần tử thứ hai sẽ là 100px + 2 * 40px = 180px, và chiều rộng của phần tử thứ ba là 100px + 3 * 40px = 220px.

Bài tập thực hành

Trong tất cả các bài tập dưới đây, bạn sẽ được cung cấp một đoạn mã với các phần tử flex có chiều rộng và flex-grow. Dựa trên đoạn mã được cung cấp, hãy tính toán kích thước mà mỗi phần tử sẽ có. Sau đó, hãy chạy mã và kiểm tra các tính toán của bạn bằng cách đo chiều rộng thực tế của các phần tử.

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

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

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

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

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

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