HTML DOM의 Style flexDirection 속성은 플렉스(flex) 컨테이너 내부 요소들이 배치되는 방향을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 플렉스 아이템의 정렬 방향을 동적으로 변경할 수 있습니다.
문법(Syntax)
flexDirection 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"
속성 값 설명
flexDirection 속성에 사용할 수 있는 값은 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| row | 플렉스 아이템을 가로 방향(행)으로 배치합니다. 기본값(default)입니다. |
| row-reverse | 플렉스 아이템을 가로 방향으로 배치하되, row와 반대 순서로 정렬합니다. |
| column | 플렉스 아이템을 세로 방향(열)으로 배치합니다. |
| column-reverse | 플렉스 아이템을 세로 방향으로 배치하되, column과 반대 순서로 정렬합니다. |
| initial | 해당 속성을 초기값(기본값)으로 되돌립니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제 코드
아래 예제는 버튼 클릭 시 자바스크립트를 통해 컨테이너의 flex 방향을 column-reverse에서 row-reverse로 실시간 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
box-shadow: 0 0 0 3px #a323c3;
display: flex;
flex-direction: column-reverse;
}
#demo div {
margin: auto;
border: thin solid green;
}
</style>
<script>
function changeFlexDirection() {
document.getElementById("demo").style.flexDirection = "row-reverse";
document.getElementById("Sample").innerHTML = "컨테이너 div의 flex 방향이 row-reverse로 변경되었습니다.";
}
</script>
</head>
<body>
<div id="demo">
<div>1 <img src="https://www.tutorialspoint.com/images/3d.png"></div>
<div>2 <img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
<div>3 <img src="https://www.tutorialspoint.com/images/css.png"></div>
<div>4 <img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
</div>
<p>아래 버튼을 클릭하면 위 컨테이너 div의 flex 방향이 변경됩니다.</p>
<button onclick="changeFlexDirection()">Flex 방향 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
코드를 실행하면 처음에는 아이템들이 세로 방향(column-reverse)으로 역순 배치된 것을 확인할 수 있습니다.
이후 “Flex 방향 변경” 버튼을 클릭하면 다음과 같이 아이템들이 가로 방향(row-reverse)으로 역순 배치되며, 하단에 변경 안내 문구가 출력됩니다.
정리
flexDirection 속성은 CSS의 flex-direction 속성과 동일한 역할을 하는 DOM API입니다. 반응형 웹 레이아웃이나 사용자 상호작용에 따라 요소 배치를 유동적으로 바꿔야 할 때 매우 유용하게 활용할 수 있습니다. 특히 모바일 환경에서는 세로 배치(column), 데스크톱에서는 가로 배치(row)로 전환하는 등의 동적 레이아웃 제어에 자주 사용됩니다.