CSS의 flex-wrap 속성은 플렉스 컨테이너 안에서 플렉스 항목들이 한 줄에 배치될지, 아니면 공간이 부족할 때 여러 줄로 줄바꿈(wrap)될지를 지정하는 속성입니다.
flex-wrap 속성의 주요 값
- nowrap (기본값): 모든 항목을 한 줄에 배치하며, 공간이 부족해도 줄바꿈하지 않습니다.
- wrap: 필요한 경우 항목을 여러 줄로 줄바꿈합니다.
- wrap-reverse: 줄바꿈은 하되, 역방향(아래에서 위로)으로 배치합니다.
아래 예제 코드를 실행하여 flex-wrap 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
예제 코드
<!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;을 적용했습니다. 각 항목의 너비가 100px이고 여백이 5px씩 있으므로, 컨테이너의 가로 크기가 부족해지면 Q1부터 Q9까지의 항목들이 자동으로 다음 줄로 넘어가 배치되는 것을 확인할 수 있습니다.
만약 flex-wrap 값을 기본값인 nowrap으로 변경하면, 항목들이 한 줄에 모두 표시되도록 각 항목의 크기가 강제로 축소됩니다. 반응형 웹 레이아웃을 만들 때 이 속성을 활용하면 화면 크기에 따라 유연하게 요소를 배치할 수 있습니다.