CSS에서 플렉스 컨테이너의 항목들이 한 줄에 모두 들어가지 못할 때 자동으로 다음 줄로 넘어가게 하려면 flex-wrap 속성을 사용합니다. 기본값인 nowrap은 항목의 크기를 줄이더라도 한 줄에 배치하지만, wrap으로 설정하면 공간이 부족할 때 항목이 여러 줄으로 나뉘어 배치됩니다.
flex-wrap 속성의 주요 값
- nowrap (기본값): 모든 플렉스 항목을 한 줄에 표시합니다.
- wrap: 필요한 경우 항목을 여러 줄로 줄바꿈합니다.
- wrap-reverse: 줄바꿈을 하되 역방향(아래에서 위로)으로 배치합니다.
예제 코드
아래 예제는 flex-wrap: wrap;을 적용하여 9개의 퀴즈 항목(Q1~Q9)이 화면 너비에 따라 자동으로 줄바꿈되는 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: #D7BDE2;
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)을 고려했을 때 컨테이너 너비가 부족하면 항목이 자동으로 다음 줄로 이동합니다. 브라우저 창 크기를 조절해 보면 항목들이 유연하게 재배치되는 것을 확인할 수 있습니다.