align-content
flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다.
기본형
justify-content : stretch | flex-start | flex-end | center | space-between | space-around | space-evenly
- stretch : 높이를 꽉 채웁니다. (기본값)
- flex-start : 시작점부터 아이템을 배치합니다.
- flex-end : 종료점부터 아이템을 배치합니다.
- center : 가운데에 아이템을 배치합니다.
- space-between : 아이템을 시작점과 종료점에 붙이고, 나머지 빈 공간을 균등하게 나누어 배치합니다.
- space-around : 빈 공간을 균등하게 배치하되, 아이템 사이의 간격은 양끝 간격의 두 배가 됩니다.
- space-evenly : 아이템 사이의 간격을 균등하게 배치합니다.
align-content: stretch
기본값은 stretch로, 높이를 꽉 채웁니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
body {
margin: 0px;
}
.container {
height: 100vh;
background-color: #01579b;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.item {
width: 40%;
padding: 10px;
}
.item:nth-child(1) {
background-color: #ffebee;
}
.item:nth-child(2) {
background-color: #ffcdd2;
font-size: 2em;
}
.item:nth-child(3) {
background-color: #ef9a9a;
font-size: 3em;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
align-content: flex-start
align-content의 값을 flex-start로 정하면 위쪽부터 채워나갑니다.
.container {
height: 100vh;
background-color: #01579b;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
align-content: flex-end
align-content의 값을 flex-end로 정하면 아래쪽부터 채워나갑니다.
.container {
height: 100vh;
background-color: #01579b;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
align-content: center
align-content의 값을 center로 정하면 가운데에 배치합니다.
.container {
height: 100vh;
background-color: #01579b;
display: flex;
flex-wrap: wrap;
align-content: center;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
align-content: space-between
align-content의 값을 space-between로 정하면 세로 간격을 동일하게 만듭니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
body {
margin: 0px;
}
.container {
height: 100vh;
background-color: #01579b;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.item {
width: 60%;
padding: 10px;
}
.item:nth-child(1) {
background-color: #ffebee;
}
.item:nth-child(2) {
background-color: #ffcdd2;
font-size: 2em;
}
.item:nth-child(3) {
background-color: #ef9a9a;
font-size: 3em;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
align-content: space-around
align-content의 값을 space-around로 정하면 세로 아이템의 위 아래 간격을 동일하게 만듭니다.
.container {
height: 100vh;
background-color: #01579b;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.