HTML DOM Style flex 속성은 display 속성이 flex로 설정된 요소의 유연한 길이(flexible length)를 설정하거나 반환하는 데 사용됩니다. 이 속성 하나로 flexGrow, flexShrink, flexBasis 세 가지 하위 속성을 동시에 제어할 수 있어, 반응형 레이아웃을 구성할 때 매우 유용합니다.
flex 속성 문법
flex 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.flex = "flex-grow flex-shrink flex-basis | auto | initial | inherit";
세 값은 공백으로 구분하여 순서대로 작성하며, 필요하지 않은 값은 생략할 수도 있습니다.
flex 속성에 사용할 수 있는 값
| 값 | 설명 |
|---|---|
| flex-grow | 지정한 숫자만큼 다른 플렉스 아이템들에 비례하여 해당 아이템을 확장(grow)합니다. |
| flex-shrink | 지정한 숫자만큼 다른 플렉스 아이템들에 비례하여 해당 아이템을 축소(shrink)합니다. 공간이 부족할 때 각 아이템이 얼마나 줄어들지 결정합니다. |
| flex-basis | 아이템의 기본 길이를 지정합니다. px, %, em 등 유효한 모든 길이 단위를 사용할 수 있습니다. |
| auto | 세 가지 flex 속성을 1 1 auto로 설정합니다. |
| initial | flex 속성을 기본값인 0 1 auto로 설정합니다. |
| none | 0 0 auto와 동일하며, 아이템이 늘어나거나 줄어들지 않습니다. |
| inherit | 부모 요소의 flex 속성 값을 그대로 상속받습니다. |
flex 속성 활용 예제
다음 예제는 네 개의 자식 div를 가진 플렉스 컨테이너에서 버튼 클릭 시 특정 div의 flex 값을 none으로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 400px;
height: 80px;
display: flex;
}
#demo div {
flex: 1 3 auto;
}
div:nth-of-type(even){
box-shadow: inset 0 0 12px red;
}
div:nth-of-type(odd){
box-shadow: inset 0 0 12px blue;
}
</style>
<script>
function changeFlex() {
document.getElementsByTagName("DIV")[1].style.flex = "none";
document.getElementsByTagName("DIV")[4].style.flex = "none";
document.getElementById("Sample").innerHTML = "첫 번째와 네 번째 div의 flex 값이 none으로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="demo">
<div id="orange"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
</div>
<p>아래 버튼을 클릭하면 위 div들의 flex 속성이 변경됩니다.</p>
<button onclick="changeFlex()">Flex 변경하기</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
초기 화면에서는 네 개의 div가 flex: 1 3 auto 설정에 따라 균등하게 공간을 나누어 가집니다.
“Flex 변경하기” 버튼을 클릭하면 두 번째와 네 번째 div의 flex 값이 none(0 0 auto)으로 바뀌면서 더 이상 공간을 늘리거나 줄이지 않고, 나머지 div가 남은 공간을 차지하게 됩니다.
이처럼 JavaScript의 DOM Style 객체를 활용하면 페이지 새로고침 없이도 플렉스 레이아웃을 실시간으로 동적으로 제어할 수 있습니다.