Flexbox 레이아웃에서 컨테이너 공간이 부족할 때 각 항목이 얼마나 줄어들지 비율을 지정하려면 flexShrink 속성을 사용하면 됩니다. JavaScript에서는 element.style.flexShrink 형태로 이 값을 동적으로 설정할 수 있습니다.
flexShrink 값이 클수록 해당 항목은 다른 항목에 비해 더 많이 축소됩니다. 기본값은 1이며, 0으로 설정하면 화면 크기가 줄어들어도 해당 항목은 축소되지 않습니다.
예제
아래 예제는 두 개의 자식 DIV를 가진 Flex 컨테이너를 만들고, 버튼을 클릭하면 두 번째 DIV(DIV2)의 flexShrink 값을 5로 변경하는 코드입니다. 실행 후 버튼을 누르면 DIV2가 DIV1보다 약 5배 더 많이 축소되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 500px;
height: 100px;
display: flex;
}
#box div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
</style>
</head>
<body>
<div id = "box">
<div style = "background-color:orange;">DIV1</div>
<div style = "background-color:yellow;" id = "myID">DIV2</div>
</div>
<p>flexShrink 속성 사용 예시</p>
<button onclick = "display()">설정</button>
<script>
function display() {
document.getElementById("myID").style.flexShrink = "5";
}
</script>
</body>
</html>코드 설명
- #box 스타일: 컨테이너에
display: flex를 적용해 자식 요소들이 Flex 항목으로 배치되도록 합니다. - 자식 DIV 초기 설정:
flex-grow: 1,flex-shrink: 1,flex-basis: 300px로 지정해 모든 항목이 동일하게 확장·축소되며, 기본 너비는 300px입니다. - display() 함수: 버튼 클릭 시
style.flexShrink = "5"를 통해 myID 요소의 축소 비율을 5로 변경합니다.
컨테이너 너비(500px)가 두 항목의 기본 너비 합계(600px)보다 작기 때문에 공간 부족 상황이 발생하고, 이때 flexShrink 값에 따라 각 항목이 차지하는 비율이 달라집니다. 이처럼 flexShrink 속성을 활용하면 반응형 레이아웃에서 요소별 축소 우선순위를 유연하게 제어할 수 있습니다.