HTML DOM style.flexShrink 속성 – 플렉스 요소 축소 비율 설정하기

HTML DOM style.flexShrink 속성이란?

HTML DOM의 style.flexShrink 속성은 플렉스(flex) 컨테이너 내부에서 해당 요소가 형제 요소들에 비해 얼마나 많이 축소될지를 결정하는 비율을 설정하는 데 사용됩니다. 이 속성은 CSS의 flex-shrink 속성과 동일하게 작동하며, 값이 클수록 공간이 부족할 때 다른 요소보다 더 많이 줄어듭니다.

구문

flexShrink 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.flexShrink = "number | initial | inherit"

속성 값 설명

number – 다른 요소에 비해 해당 요소가 축소되는 비율을 지정합니다. 기본값은 1이며, 0으로 설정하면 요소가 전혀 축소되지 않습니다.
initial – 속성값을 브라우저의 기본값으로 초기화합니다.
inherit – 부모 요소의 속성값을 그대로 상속받습니다.

예제: 네 번째 div의 축소 비율 변경하기

다음 예제에서는 버튼을 클릭하면 다섯 개의 div 중 네 번째 요소의 flexShrink 값을 3으로 변경하여, 나머지 형제 요소들보다 3배 더 많이 축소되도록 만듭니다.

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        margin: auto;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
    }
    #demo {
        width: 500px;
        height: 30px;
        display: flex;
        text-align: center;
        font-size: 1.2em;
        line-height: 30px;
    }
    #demo div {
        flex-basis: 120px;
    }
</style>
<script>
    function changeFlexShrink() {
        document.getElementsByTagName("DIV")[4].style.flexShrink="3";
        document.getElementById("Sample").innerHTML="네 번째 요소가 다른 요소들보다 3배 더 축소되었습니다.";
    }
</script>
</head>
<body>
    <div id="demo">
        <div>First Div</div>
        <div>Second Div</div>
        <div>Third Div</div>
        <div>Fourth Div</div>
        <div>Fifth Div</div>
    </div>
    <br>
    <p>아래 버튼을 클릭하면 위 div 중 네 번째 요소의 축소 속성이 변경됩니다.</p>
    <button onclick="changeFlexShrink()">Change Flex Shrink</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

페이지를 처음 열면 다섯 개의 div가 동일한 폭으로 나란히 배치되어 있는 것을 확인할 수 있습니다.

HTML DOM style.flexShrink 속성 – 플렉스 요소 축소 비율 설정하기

"Change Flex Shrink" 버튼을 클릭하면 −

HTML DOM style.flexShrink 속성 – 플렉스 요소 축소 비율 설정하기

버튼을 클릭한 후에는 네 번째 div가 나머지 형제 요소들보다 3배 더 많이 축소되어 표시되며, 그 결과가 하단 메시지 영역에 출력됩니다.

참고 사항

flexShrink 속성은 display: flex가 적용된 부모 컨테이너 안에서만 의미가 있습니다. flexBasis(기본 크기)와 flexGrow(확대 비율) 속성과 함께 사용하면 화면 크기에 유연하게 대응하는 반응형 레이아웃을 손쉽게 구성할 수 있습니다.