justify-content
justify-content는 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정하고 flex-direction의 값이 column이라면 세로 방향의 정렬을 정합니다.
기본형
justify-content : flex-start | flex-end | center | space-between | space-around | space-evenly
- flex-start : 시작점부터 아이템을 배치합니다.
- flex-end : 종료점부터 아이템을 배치합니다.
- center : 가운데에 아이템을 배치합니다.
- space-between : 아이템을 시작점과 종료점에 붙이고, 나머지 빈 공간을 균등하게 나누어 배치합니다.
- space-around : 빈 공간을 균등하게 배치하되, 아이템 사이의 간격은 양끝 간격의 두 배가 됩니다.
- space-evenly : 아이템 사이의 간격을 균등하게 배치합니다.
justify-content: flex-start
justify-content의 기본값은 flex-start로 시작점부터 아이템을 배치합니다.
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2 Item 2</div>
<div class="item">Item 3 Item 3 Item 3</div>
</div>
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: flex-start;
flex-direction: row;
}
.item:nth-child(1) {
background-color: #ffebee;
}
.item:nth-child(2) {
background-color: #ffcdd2;
}
.item:nth-child(3) {
background-color: #ef9a9a;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
justify-content: flex-start 일 때 flex-direction: row-reverse 로 정하면 플렉스 시작점이 오른쪽이 됩니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: flex-start;
flex-direction: row-reverse;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
justify-content: flex-start 일 때 flex-direction: column 로 정하면 플렉스 시작점이 위쪽이 됩니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
justify-content: flex-start 일 때 flex-direction: column-reverse 로 정하면 플렉스 시작점이 아래쪽이 됩니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: flex-start;
flex-direction: column-reverse;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
justify-content: flex-end
justify-content의 값을 flex-end로 정하면 플렉스가 끝나는 지점에 배치합니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: flex-end;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
justify-content: center
justify-content의 값을 center로 정하면 가운데에 배치합니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: center;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
justify-content: space-between
justify-content의 값을 space-between으로 정하면 빈 공간을 균등하게 나누어 아이템 사이에 간격을 만듭니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: space-between;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
justify-content: space-around
justify-content의 값을 space-around로 정하면 양 옆의 간격을 균등하게 만듭니다. 아이템 사이의 간격은 양끝 간격의 두 배가 됩니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: space-around;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
justify-content: space-evenly
justify-content의 값을 space-evenly로 정하면 양끝과 아이템 사이의 간격을 동일하게 만듭니다.
.container {
height: 400px;
background-color: #01579b;
display: flex;
justify-content: space-evenly;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.