CSS flex-wrap 속성이란?
flex-wrap 속성은 플렉스 컨테이너 내부의 플렉스 아이템들이 한 줄에 모두 배치될지, 아니면 공간이 부족할 경우 여러 줄로 줄바꿈(wrap)될지를 지정하는 CSS 속성입니다. 기본값인 nowrap에서는 아이템의 너비를 강제로 축소하더라도 한 줄에 배치되지만, wrap 값을 사용하면 컨테이너의 너비를 초과하는 아이템이 자동으로 다음 줄로 이동합니다.
flex-wrap 속성의 주요 값
- nowrap (기본값): 모든 플렉스 아이템을 한 줄에 배치합니다.
- wrap: 공간이 부족할 때 아이템을 여러 줄로 줄바꿈합니다.
- wrap-reverse: 여러 줄로 줄바꿈하되, 줄의 순서가 반대로(아래에서 위로) 쌓입니다.
flex-wrap 속성 적용 예제
아래 예제는 flex-wrap: wrap;을 적용하여 플렉스 아이템들이 컨테이너 너비를 초과할 때 자동으로 줄바꿈되도록 구현한 코드입니다. 9개의 퀴즈 항목(Q1~Q9)이 화면 크기에 따라 여러 줄로 나뉘어 배치되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: orange;
flex-wrap: wrap;
}
.mycontainer > div {
background-color: white;
text-align: center;
line-height: 40px;
font-size: 25px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Quiz</h1>
<div class = "mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
<div>Q9</div>
</div>
</body>
</html>코드 설명
.mycontainer클래스에display: flex;를 선언해 플렉스 컨테이너를 만들고,flex-wrap: wrap;으로 줄바꿈을 활성화했습니다.- 각 자식 요소(
div)는 너비 100px, 여백 5px를 가지므로, 컨테이너 너비가 좁아지면 아이템이 자동으로 다음 줄로 넘어갑니다. - 배경색을 주황색으로 지정해 줄바꿈된 영역을 시각적으로 쉽게 확인할 수 있습니다.
반응형 웹 디자인에서 화면 크기에 따라 레이아웃이 유연하게 조정되기를 원한다면, flex-wrap 속성은 필수적으로 활용되는 핵심 기능입니다.