flex-wrap
기본적으로 플렉스 컨테이너 안의 플렉스 아이템들은 한 줄로 배치됩니다. 하지만 flex-wrap 속성을 사용하면 여러 줄로 배치할 수 있습니다.
기본형
flex-wrap : nowrap | warp | warp-reverse
- nowrap : 한 줄로 배열합니다.
- warp : 여러 줄로 배열합니다.
- warp-reverse : 여러 줄로 배열하지만 기존 방향과 반대로 배치합니다.
flex-wrap: nowrap
플렉스 아이템들을 한 줄로 배치하며, 기본 값입니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
.container {
height: 400px;
background-color: #01579b;
display: flex;
flex-wrap: nowrap;
}
.item:nth-child(1) {
background-color: #ffebee;
}
.item:nth-child(2) {
background-color: #ffcdd2;
}
.item:nth-child(3) {
background-color: #ef9a9a;
}
.item:nth-child(4) {
background-color: #e57373;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
아이템의 가로 크기를 늘려도 한 줄에 나오도록 크기를 조정합니다.
.item {
width: 30%;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
flex-wrap: wrap
flex-wrap의 값을 wrap으로 정하면 아이템을 여러 줄로 배치합니다. 만약 아이템의 너비가 부모 요소의 컨테이너의 크기를 넘거가면 아이템을 다음 줄로 넘깁니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
flex-wrap: wrap;
}
.item {
width: 30%;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
flex-direction의 속성 값이 column일 때 flex-wrap의 값을 wrap으로 정하면, 오른쪽으로 넘깁니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
height: 30%;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
flex-wrap: wrap-reverse
flex-wrap의 값을 wrap-reverse로 정하면, 아이템을 이전 줄로 넘깁니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
flex-wrap: wrap-reverse;
}
.item {
width: 30%;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.