HTML DOM 스타일의 flexFlow 속성은 요소의 flexDirection과 flexWrap 속성을 동시에 지정할 수 있는 속성입니다. 즉, 두 속성의 축약형(shorthand)으로, 값을 지정할 때도 flexDirection과 flexWrap의 순서대로 작성합니다.
문법(Syntax)
flexFlow 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"
속성 값 설명
flexFlow 속성에 사용할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| flex-direction | 플렉스 아이템이 배치되는 방향을 지정합니다. 사용 가능한 값은 row, row-reverse, column, column-reverse, initial, inherit입니다. 기본값은 row입니다. |
| flex-wrap | 플렉스 아이템이 컨테이너를 벗어날 때 줄바꿈(랩핑) 여부를 지정합니다. 사용 가능한 값은 nowrap, wrap, wrap-reverse, initial, inherit입니다. 기본값은 nowrap입니다. |
| initial | 해당 속성을 브라우저의 기본 초기값으로 설정합니다. |
| inherit | 부모 요소의 해당 속성값을 상속받아 사용합니다. |
예제 코드
다음 예제는 버튼 클릭 시 flexFlow 속성을 동적으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 600px;
height: 190px;
border:1px solid black;
display: flex;
flex-flow: row-reverse no-wrap;
}
#demo div {
width:100px;
height:100px;
}
</style>
<script>
function changeFlexFlow() {
document.getElementById("demo").style.flexFlow="row wrap";
document.getElementById("Sample").innerHTML="flex flow 속성이 이제 row wrap으로 설정되었습니다.";
}
</script>
</head>
<body>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/css.png"></div>
<div>1</div>
<div><img src="https://www.tutorialspoint.com/images/Swift.png"></div>
<div>2</div>
<div><img src="https://www.tutorialspoint.com/images/reactjs.png"></div>
<div>3</div>
<div><img src="https://www.tutorialspoint.com/images/blockchain.png"></div>
<div>4</div>
<div><img src="https://www.tutorialspoint.com/images/3d.png"></div>
<div>5</div>
</div>
<p>아래 버튼을 클릭하면 위 컨테이너 div의 flex flow 속성이 변경됩니다.</p>
<button onclick="changeFlexFlow()">Flex Flow 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
코드를 실행하면 다음과 같은 화면이 나타납니다.
위 상태에서 “Flex Flow 변경” 버튼을 클릭하면, 플렉스 아이템들이 row wrap 방식으로 재배치되어 한 줄에 아이템이 꽉 차면 자동으로 다음 줄로 넘어가는 것을 확인할 수 있습니다.
정리
flexFlow 속성은 flexDirection과 flexWrap을 한 번에 제어할 수 있어 코드를 간결하게 유지할 수 있습니다. 반응형 레이아웃을 구현할 때 특히 유용하며, JavaScript로 동적으로 스타일을 변경하는 경우에도 위와 같이 간단하게 적용할 수 있습니다.