Hệ số co nén của khối flex trong CSS

Trong bài học trước, chúng ta đã phát hiện ra rằng, khi các phần tử flex không đủ không gian, chúng bắt đầu co lại. Độ lớn của phần chiều rộng tổng lớn hơn chiều rộng của phần tử cha được gọi là không gian tự do âm.

Về mặt kỹ thuật, việc nén có nghĩa là từ chiều rộng của mỗi phần tử, một phần nhỏ chiều rộng bị cắt bớt để tất cả các phần tử có thể vừa vặn trong phần tử cha của chúng.

Hãy thực hiện một số phép tính. Giả sử, ví dụ, chúng ta có 4 phần tử với chiều rộng là 200px. Giả sử chiều rộng của phần tử cha bằng 700px. Điều này có nghĩa là tổng chiều rộng của các phần tử bằng:

200px * 4 = 800px

Chiều rộng này lớn hơn chiều rộng của phần tử cha 100px. Hãy tính toán xem cần phải cắt bớt bao nhiêu từ mỗi phần tử để chúng vừa vặn trong phần tử cha của chúng:

100px / 4 = 25px

Nghĩa là chiều rộng của các phần tử sẽ là:

200px - 25px = 175px

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

Hãy tính toán chiều rộng của các khối, sau đó kiểm tra lại các phép tính bằng cách đo lường:

<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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}