justify-content 속성

속성 justify-content는 플렉스(flex) 블록의 메인 축과 그리드(grid)의 수평 축을 따라 요소들을 정렬합니다. 부모 요소에 적용됩니다.

구문

선택자 {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

값

값	설명
`flex-start`	블록들이 메인(수평) 축의 시작점에 붙어 정렬됩니다.
`flex-end`	블록들이 메인(수평) 축의 끝점에 붙어 정렬됩니다.
`center`	블록들이 메인(수평) 축의 중앙에 정렬됩니다.
`space-between`	블록들이 메인(수평) 축을 따라 균등하게 분배되며, 첫 번째 요소는 축의 시작점에, 마지막 요소는 축의 끝점에 붙습니다.
`space-around`	블록들이 메인(수평) 축을 따라 균등하게 분배되며, 첫 번째 블록과 축 시작점 사이, 마지막 블록과 축 끝점 사이의 간격이 다른 블록들 사이의 간격과 같습니다. 하지만, 보이는 것과 달리 이 간격들은 동일하지 않습니다: 간격들이 합쳐져서 두 블록 사이의 거리는 블록과 축 시작점/끝점 사이 거리의 두 배가 됩니다.

기본값: flex-start.

예제 . flex-start 값

현재 축은 왼쪽에서 오른쪽으로 향합니다(이는 flex-direction: row에 의해 설정됨). 블록들은 왼쪽에 붙어 있습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . flex-end 값

이 예제에서도 축은 왼쪽에서 오른쪽으로 향하지만, justify-content가 flex-end 값으로 설정되어 블록들이 오른쪽에 붙어 있습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . center 값

이제 블록들은 메인 축의 방향에 관계없이 중앙에 정렬됩니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . space-between 값

블록들이 메인 축을 따라 분배되며, 첫 번째 요소는 축의 시작점에, 마지막 요소는 축의 끝점에 붙습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . space-around 값

블록들이 메인 축을 따라 분배되며, 첫 번째 블록과 축 시작점 사이, 마지막 블록과 축 끝점 사이의 간격이 다른 블록들 사이의 간격과 같습니다. 그러나 간격들이 합쳐져서 두 블록 사이의 거리는 블록과 축 시작점/끝점 사이 거리의 두 배가 됩니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . center 값. 축이 아래로 향함

flex-direction을 column 값으로 설정하여 메인 축의 방향을 변경해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . space-between 값. 축이 아래로 향함

이제 블록들이 수직 방향으로 균등하게 분배됩니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . 그리드에서 수평 축(행)의 시작점 정렬

요소들을 수평 축의 시작점에 정렬하도록 설정해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

예제 . 그리드에서 수평 축 중앙 정렬

이제 요소들을 수평 축의 중앙에 정렬하도록 설정해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

예제 . 그리드에서 수평 축 끝점 정렬

요소들을 수평 축의 끝점에 정렬하도록 설정해 보겠습니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

같이 보기

속성 flex-direction,
플렉스 블록의 축 방향을 설정합니다
속성 align-items,
교차 축 정렬을 설정합니다
속성 flex-wrap,
플렉스 블록의 다중 줄 처리 방식을 설정합니다
속성 flex-flow,
flex-direction과 flex-wrap의 단축 속성입니다
속성 order,
플렉스 블록의 순서를 설정합니다
속성 align-self,
개별 블록의 정렬을 설정합니다
속성 flex-basis,
특정 플렉스 블록의 크기를 설정합니다
속성 flex-grow,
플렉스 블록의 확장 비율을 설정합니다
속성 flex-shrink,
플렉스 블록의 축소 비율을 설정합니다
속성 flex,
flex-grow, flex-shrink, flex-basis의 단축 속성입니다