HTML DOM Style의 flexWrap 속성은 플렉스(flex) 컨테이너 내부에 있는 요소들이 어떻게 줄바꿈(wrap)될지를 지정하는 데 사용됩니다. 자바스크립트를 통해 동적으로 플렉스 레이아웃의 줄바꿈 동작을 제어할 수 있어, 반응형 UI를 구현할 때 매우 유용합니다.
flexWrap 속성 문법
flexWrap 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit";
속성 값 설명
| 값 | 설명 |
|---|---|
| nowrap | 기본값(default)입니다. 플렉스 아이템이 줄바꿈되지 않고 한 줄에 배치됩니다. |
| wrap | 필요한 경우 플렉스 아이템이 다음 줄로 줄바꿈됩니다. |
| wrap-reverse | 필요한 경우 플렉스 아이템이 줄바꿈되지만, 역순(반대 방향)으로 배치됩니다. |
| initial | 해당 속성을 기본(initial) 값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
flexWrap 속성 활용 예제
아래 예제는 flexWrap 속성을 실제로 적용한 코드입니다. 버튼을 클릭하면 컨테이너의 flex-wrap 값이 nowrap으로 변경되는 동작을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
margin: auto;
width: 180px;
height: 120px;
box-shadow: 0 0 0 5px brown;
display: flex;
flex-wrap: wrap;
}
#demo div {
padding: 0;
width: 50px;
height: 50px;
border: 5px solid;
border-radius: 15%;
}
#demo div:nth-child(even) {
border-color: black;
}
#demo div:nth-child(odd) {
border-color: red;
}
</style>
<script>
function changeFlexWrap() {
document.getElementById("demo").style.flexWrap = "nowrap";
document.getElementById("Sample").innerHTML = "컨테이너 div의 flex-wrap 속성이 no-wrap으로 설정되었습니다.";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>아래 버튼을 클릭하면 위 컨테이너의 flex-wrap 속성이 변경됩니다.</p>
<button onclick="changeFlexWrap()">Change Flex Wrap</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
코드를 실행하면 다음과 같이 빨간색과 검은색 테두리의 박스들이 플렉스 컨테이너 안에서 줄바꿈되어 배치된 것을 확인할 수 있습니다.
Change Flex Wrap 버튼을 클릭하면 flex-wrap 값이 nowrap으로 변경되어, 모든 박스가 한 줄에 나란히 배치되는 것을 볼 수 있습니다.
정리
HTML DOM Style의 flexWrap 속성은 CSS의 flex-wrap 속성을 자바스크립트로 제어할 수 있게 해주는 기능입니다. nowrap, wrap, wrap-reverse 값을 상황에 맞게 활용하면 화면 크기에 따라 유연하게 대응하는 반응형 레이아웃을 손쉽게 구현할 수 있습니다.