CSS 플렉스 블록의 압축 계수

이전 강의에서 우리는 플렉스 요소들이 공간이 부족할 때 수축하기 시작한다는 것을 알아냈습니다. 총 너비가 부모 너비보다 얼마나 큰지를 음의 자유 공간이라고 합니다.

기술적으로 압축은 각 요소의 너비에서 조각을 떼어내어 모든 요소가 그 부모에 맞도록 하는 것을 의미합니다.

계산을 해봅시다. 예를 들어, 너비가 200px인 4개의 요소가 있다고 가정합니다. 부모의 너비가 700px라고 가정합니다. 요소들의 총 너비는 다음과 같습니다:

200px * 4 = 800px

이것은 부모의 너비보다 100px 더 큽니다. 각 요소에서 얼마나 떼어내야 요소들이 부모에 맞는지 계산해 봅시다:

100px / 4 = 25px

즉, 요소의 너비는 다음과 같습니다:

200px - 25px = 175px

설명된 블록을 구현하고 측정을 통해 요소의 너비가 실제로 우리가 계산한 값과 같은지 확인하세요.

블록의 너비를 계산한 다음 측정으로 계산을 확인하세요:

<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;
}