Chiều rộng khác nhau của các phần tử và khả năng co giãn của khối flex trong CSS

Bây giờ giả sử các phần tử của chúng ta có chiều rộng khác nhau. Trong trường hợp này, phần bị tách ra sẽ tỷ lệ thuận với chiều rộng của phần tử đó và sẽ được tính toán theo công thức sau: không gian tự do âm * (chiều rộng phần tử / tổng chiều rộng tất cả các phần tử).

Giả sử chúng ta có 4 phần tử. Giả sử chiều rộng của phần tử thứ nhất là 400px, chiều rộng của các phần tử còn lại - 200px, và 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

Khi đó không gian tự do âm sẽ bằng:

1000px - 900px = 100px

Hãy tìm xem phần tử đầu tiên sẽ bị tách ra bao nhiêu:

100px * (400px / 1000px) = 40px

Tức là chiều rộng của nó sẽ bằng:

400px - 40px = 360px

Hãy tìm xem mỗi phần tử trong số các phần tử còn lại bị tách ra bao nhiêu:

100px * (200px / 1000px) = 20px

Tức là chiều rộng của các phần tử này sẽ bằng:

200px - 20px = 180px

Hãy triển khai các khối được mô tả và kiểm tra bằng cách đo đạc, 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.

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

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