flex-shrink 속성

flex-shrink 속성은 충분한 공간이 부족한 경우 flex 컨테이너 내부에서 인접한 요소들에 비해 flex 블록이 얼마나 축소될지를 결정합니다.

예를 들어, flex 컨테이너 내부의 모든 flex 블록이 flex-shrink:1를 가지면 그들은 동일한 크기를 가질 것입니다. 만약 그 중 하나가 flex-shrink:2를 가지면, 그것은 나머지 모든 블록보다 2배 더 작아질 것입니다.

적용 대상: 개별 flex 블록.

이 속성은 단축 속성 flex의 일부분으로 포함됩니다.

문법

선택자 {
	flex-shrink: 양수;
}

기본값: 1.

예제

3개의 요소가 있다고 가정합니다. 각 요소의 너비는 200px이며 총합은 600px로, 350px인 부모 컨테이너의 너비보다 큽니다:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex-shrink: 1;
}
.elem2 {
	flex-shrink: 2;
}
.elem3 {
	flex-shrink: 3;
}

다음 공식을 사용하여 음의 여유 공간을 계산해 보겠습니다:

600px - 350px = 250px

각 요소의 flex-shrink 속성 값을 고려한 가중치 적용 요소 너비의 합계는 다음과 같습니다:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

이제 첫 번째 요소가 얼마나 축소될지 결정해 보겠습니다:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41.6px

두 번째 요소:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83.3px

세 번째 요소:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

즉, flex-shrink 값이 3인 세 번째 요소가 다른 요소들보다 더 많이 축소됩니다.

참고 항목

flex-direction 속성,
이는 flex 블록의 축 방향을 설정합니다
justify-content 속성,
이는 주축을 따라 정렬을 설정합니다
align-items 속성,
이는 교차축을 따라 정렬을 설정합니다
flex-wrap 속성,
이는 flex 블록의 여러 줄 배치를 설정합니다
flex-flow 속성,
flex-direction 및 flex-wrap의 단축 속성입니다
order 속성,
이는 flex 블록의 순서를 설정합니다
align-self 속성,
이는 단일 블록의 정렬을 설정합니다
flex-basis 속성,
이는 특정 flex 블록의 크기를 설정합니다
flex-grow 속성,
이는 flex 블록의 확대를 설정합니다
flex 속성,
flex-grow, flex-shrink 및 flex-basis의 단축 속성입니다