CSS 플렉스 블록 압축 조절

기본적으로 모든 요소는 요소의 너비에 비례하여 조각이 떼어집니다. 그러나 특정 요소에서 더 크거나 작은 조각이 떼어지도록 할 수 있습니다. 이를 위해 특별한 속성인 flex-shrink가 존재합니다.

이 속성은 위에서 언급한 공식에 따라 요소에서 떼어낼 조각을 계산할 때 요소의 너비에 곱해지는 가중치입니다. 예를 들어, 요소의 너비가 200px이고 flex-shrink 값이 3라면, 요소의 가중 (즉, 가중치가 곱해진) 너비는 다음과 같습니다:

200px * 3 = 600px

flex-shrink를 고려한 공식은 다음과 같습니다: 음의 자유 공간 * (요소의 가중 너비 / 모든 요소의 가중 너비 합).

예제를 살펴보겠습니다. 4개의 요소가 있다고 가정합니다. 첫 번째 요소의 너비는 400px이고 flex-shrink 값은 2입니다. 나머지 요소들의 너비는 200px이고, 그들의 flex-shrink 값은 1입니다. 부모의 너비는 900px라고 가정합니다.

요소들의 총 너비는 다음과 같습니다:

400px + 3 * 200px = 1000px

음의 자유 공간은 다음과 같습니다:

1000px - 900px = 100px

요소들의 총 가중 너비는 다음과 같습니다:

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

첫 번째 요소의 가중 너비는 다음과 같습니다:

400px * 2 = 800px

첫 번째 요소에서 떼어질 조각의 크기는 다음과 같습니다:

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

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

400px - 57.14px = 342.86px ~ 343px

나머지 각 요소의 가중 너비는 다음과 같습니다:

200px * 1 = 200px

각 요소에서 떼어질 조각의 크기는 다음과 같습니다:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

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

200px - 14.2px = 185.8px ~ 186px

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

블록들의 너비를 계산한 다음, 측정을 통해 계산을 검증하세요:

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

블록들의 너비를 계산한 다음, 측정을 통해 계산을 검증하세요:

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

블록들의 너비를 계산한 다음, 측정을 통해 계산을 검증하세요:

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