JavaScript에서 플렉스 컨테이너 안에 있는 항목들의 배치 방향을 변경하고 싶다면 flex-direction 속성을 사용하면 됩니다. 이 속성은 CSS에서 정의된 플렉스 레이아웃의 주축(main axis) 방향을 결정하며, JavaScript에서는 style.flexDirection을 통해 동적으로 제어할 수 있습니다.
flexDirection 속성의 주요 값
- row – 항목을 가로 방향(왼쪽에서 오른쪽)으로 배치합니다. (기본값)
- row-reverse – 항목을 가로 방향이지만 오른쪽에서 왼쪽으로 배치합니다.
- column – 항목을 세로 방향(위에서 아래로)으로 배치합니다.
- column-reverse – 항목을 세로 방향이지만 아래에서 위로 배치합니다.
예제 코드
아래 예제는 버튼을 클릭하면 flexDirection 속성을 사용해 플렉스 항목의 방향을 row-reverse로 변경하는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 450px;
height: 150px;
display: flex;
flex-direction: column;
}
#box div {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 20px;
}
</style>
</head>
<body>
<div id = "box">
<div style = "background-color:orange;">DIV1</div>
<div style = "background-color:blue;">DIV2</div>
<div style = "background-color:yellow;" id="myID">DIV3</div>
</div>
<p>flexDirection 속성 사용하기</p>
<button onclick = "display()">방향 변경</button>
<script>
function display() {
document.getElementById("box").style.flexDirection = "row-reverse";
}
</script>
</body>
</html>코드 설명
위 예제에서 #box 요소는 display: flex;가 적용된 플렉스 컨테이너이며, 초기 상태에서는 flex-direction: column;에 의해 세 개의 자식 DIV가 세로로 나열됩니다.
버튼을 클릭하면 display() 함수가 실행되어 document.getElementById("box").style.flexDirection = "row-reverse"; 코드를 통해 컨테이너의 방향이 가로 반대 방향으로 즉시 변경됩니다. 이처럼 JavaScript를 활용하면 사용자의 인터랙션에 따라 레이아웃 방향을 실시간으로 조정할 수 있습니다.