CSS flex-shrink 속성이란?
flex-shrink 속성은 플렉스 컨테이너의 공간이 부족할 때 각 플렉스 아이템(flex-item)을 얼마나 축소할지 비율을 지정하는 속성입니다. 기본값은 1이며, 값이 클수록 해당 아이템이 더 많이 줄어듭니다.
반대로 특정 아이템에 flex-shrink: 0을 지정하면, 컨테이너의 가용 공간이 부족해지더라도 해당 아이템은 축소되지 않고 원래 크기를 그대로 유지합니다.
flex-shrink 속성 사용 예제
아래 코드는 CSS flex-shrink 속성을 실제로 구현한 예제입니다. 이 예제에서는 Q4 플렉스 아이템에 flex-shrink: 0을 적용하여, 화면 폭이 좁아져도 Q4 항목만은 줄어들지 않도록 설정했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div style = "flex-shrink: 0">Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
<div>Q9</div>
</div>
</body>
</html>
실행 결과 확인 포인트
브라우저 창의 너비를 점차 줄여 보세요. 대부분의 아이템(Q1~Q9)은 공간이 부족해짐에 따라 서서히 축소되지만, flex-shrink: 0이 적용된 Q4 아이템은 지정된 100px 너비를 그대로 유지하는 것을 확인할 수 있습니다.
이처럼 flex-shrink 속성을 활용하면 반응형 레이아웃에서 특정 요소를 고정하고 나머지 요소만 유연하게 조절하는 등, 세밀한 플렉스 레이아웃 제어가 가능합니다.