CSS의 flexFlow 속성을 활용하면 플렉스 컨테이너 안의 유연한 항목(flex items)들을 세로 열 방향으로 손쉽게 배치할 수 있습니다. 이 속성은 flex-direction과 flex-wrap을 한 번에 지정할 수 있는 축약형(shorthand) 속성입니다.
flexFlow 속성이란?
flexFlow는 다음 두 가지 값을 조합하여 사용합니다.
- flex-direction: 항목의 배치 방향을 결정합니다. (row, column, row-reverse, column-reverse)
- flex-wrap: 항목이 공간이 부족할 때 줄바꿈 여부를 결정합니다. (nowrap, wrap, wrap-reverse)
예를 들어 column nowrap으로 설정하면 항목들이 위에서 아래로 한 줄로 정렬되며, 줄바꿈 없이 한 열에 모두 표시됩니다.
JavaScript로 flexFlow 동적으로 변경하기
버튼 클릭과 같은 사용자 이벤트에 반응해 레이아웃을 변경하려면 JavaScript에서 element.style.flexFlow 속성값을 설정하면 됩니다. 아래 예제 코드를 직접 실행해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 1px solid #000000;
width: 100px;
height: 150px;
display: flex;
flex-flow: row wrap;
}
#box div {
height: 40px;
width: 40px;
}
</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.flexFlow = "column nowrap";
}
</script>
</body>
</html>코드 설명
- 초기 상태에서
#box는flex-flow: row wrap으로 설정되어 있어, 세 개의 DIV가 가로 방향으로 배치됩니다. - 버튼을 클릭하면
display()함수가 실행되어flexFlow값이column nowrap으로 변경됩니다. - 그 결과 DIV1, DIV2, DIV3가 세로 열 방향으로 재배치되는 것을 확인할 수 있습니다.
이처럼 JavaScript와 flexFlow 속성을 조합하면 사용자 인터랙션에 따라 레이아웃 방향을 실시간으로 전환하는 반응형 UI를 쉽게 구현할 수 있습니다.