CSS의 flex-shrink 속성은 플렉스 컨테이너의 공간이 부족할 때 해당 플렉스 항목(flex item)이 다른 항목들에 비해 얼마나 많이 줄어들지를 결정합니다.
기본값은 1이며, 값이 클수록 공간이 부족할 때 더 많이 축소됩니다. 반대로 0으로 설정하면 화면 크기가 줄어들어도 해당 항목은 전혀 축소되지 않고 원래 크기를 유지합니다.
flex-shrink 속성의 주요 특징
- 기본값: 1 (모든 플렉스 항목이 동일한 비율로 축소)
- 0: 항목이 축소되지 않음
- 1보다 큰 값: 다른 항목보다 더 많이 축소됨
예제 코드
아래 예제에서는 9개의 항목 중 네 번째 항목(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>위 코드를 브라우저에서 실행한 후 창 크기를 줄여 보면, Q4 항목만 고정된 너비(100px)를 유지하고 나머지 항목들이 균등하게 축소되는 것을 확인할 수 있습니다.