CSS3의 Flexbox 레이아웃에서는 기본적으로 플렉스 항목(Flex Items)들이 한 줄에 모두 배치됩니다. 하지만 컨테이너의 너비가 부족할 때 항목들을 다음 줄로 자동으로 넘기고 싶다면 flex-wrap 속성을 사용하면 됩니다.
flex-wrap 속성이란?
flex-wrap 속성은 플렉스 컨테이너 안의 항목들이 한 줄에 배치될지, 아니면 여러 줄로 나뉘어 배치될지를 결정합니다. 값을 wrap으로 설정하면 항목들이 컨테이너의 너비를 초과할 경우 자동으로 줄바꿈되어 아래 줄로 이동합니다.
- nowrap (기본값): 모든 항목을 한 줄에 배치하며, 필요시 항목의 크기를 축소합니다.
- wrap: 항목들이 공간이 부족하면 다음 줄로 줄바꿈됩니다.
- wrap-reverse: wrap과 동일하지만 줄의 순서가 역방향으로 배치됩니다.
예제 코드
아래는 CSS3를 사용하여 플렉스 항목의 줄바꿈을 활성화하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
height: 300px;
display: flex;
width: 300px;
border: 2px solid red;
flex-wrap: wrap;
}
div {
width: 150px;
height: 100px;
color: white;
text-align: center;
font-size: 20px;
}
.first {
background-color: rgb(55, 0, 255);
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Flex wrap example</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>코드 설명
위 예제에서 주목해야 할 부분은 다음과 같습니다.
.container클래스에는display: flex가 적용되어 있어 세 개의 자식 div가 플렉스 항목으로 배치됩니다.- 컨테이너의 너비는 300px인데, 각 항목의 너비는 150px이므로 한 줄에는 두 개의 항목만 들어갈 수 있습니다.
flex-wrap: wrap;덕분에 세 번째 항목(Third Div)은 첫 번째 줄에 공간이 부족하여 자동으로 두 번째 줄로 내려가게 됩니다.
실행 결과
위 코드를 실행하면 빨간색 테두리의 컨테이너 안에서 파란색(First Div)과 빨간색(Second Div) 항목이 첫 번째 줄에 나란히 배치되고, 보라색(Third Div) 항목은 두 번째 줄로 줄바꿈되어 표시됩니다.
마무리
flex-wrap 속성은 반응형 웹 디자인에서 매우 유용하게 활용됩니다. 화면 크기에 따라 항목들이 자연스럽게 재배치되도록 하려면 flex-wrap과 함께 flex-basis, media query 등을 조합하여 사용하는 것을 추천합니다.