Điều chỉnh độ co của khối flex trong CSS

Theo mặc định, tất cả các phần tử đều bị cắt bớt những mẩu nhỏ, tỷ lệ với chiều rộng của phần tử. Tuy nhiên, có thể làm sao để một số phần tử bị cắt bớt những mẩu lớn hơn hoặc nhỏ hơn. Để làm điều này, tồn tại một thuộc tính đặc biệt flex-shrink.

Thuộc tính này đại diện cho một trọng số nhất định, sẽ được nhân với chiều rộng của phần tử khi tính toán mẩu bị cắt bớt theo công thức đã nêu ở trên. Ví dụ: nếu chiều rộng của phần tử là 200px, và flex-shrink của nó là 3, thì chiều rộng có trọng số (tức là đã nhân với trọng số) của phần tử sẽ bằng:

200px * 3 = 600px

Công thức có tính đến flex-shrink sẽ có dạng sau: không gian tự do âm * (chiều rộng có trọng số của phần tử / tổng tất cả chiều rộng có trọng số của các phần tử).

Chúng ta hãy xem một ví dụ. Giả sử chúng ta có 4 phần tử. Giả sử chiều rộng của phần tử đầu tiên là 400px, và flex-shrink của nó là 2, chiều rộng của các phần tử còn lại - 200px, và flex-shrink của chúng là 1. Giả sử chiều rộng của phần tử cha là 900px.

Tổng chiều rộng của các phần tử bằng:

400px + 3 * 200px = 1000px

Không gian tự do âm sẽ bằng:

1000px - 900px = 100px

Tổng chiều rộng có trọng số của các phần tử bằng:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Chiều rộng có trọng số của phần tử đầu tiên bằng:

400px * 2 = 800px

Phần tử đầu tiên sẽ bị cắt bớt mẩu sau:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Chiều rộng của phần tử sẽ bằng:

400px - 57.14px = 342.86px ~ 343px

Chiều rộng có trọng số của mỗi phần tử còn lại bằng:

200px * 1 = 200px

Mỗi phần tử sẽ bị cắt bớt mẩu sau:

100px * (200px / 1400px) = 100px * 0.1428 = 14.28px

Chiều rộng của phần tử sẽ bằng:

200px - 14.28px = 185.72px ~ 186px

Hãy triển khai các khối được mô tả và kiểm tra bằng cách đo, rằng chiều rộng của các phần tử thực sự bằng với giá trị chúng ta đã tính toán.

Tính toán chiều rộng của các khối, sau đó kiểm tra các tính toán bằng cách đo:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Tính toán chiều rộng của các khối, sau đó kiểm tra các tính toán bằng cách đo:

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

Tính toán chiều rộng của các khối, sau đó kiểm tra các tính toán bằng cách đo:

<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: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}