align-content 속성

속성 align-content는 플렉스(flex) 블록의 경우 교차 축을 따라, 그리드의 경우 수직 축을 따라 요소들의 정렬을 지정합니다. 부모 요소에 적용됩니다.

구문

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

값

값	설명
`flex-start`	블록들이 교차(수직) 축의 시작점에 붙습니다.
`flex-end`	블록들이 교차(수직) 축의 끝점에 붙습니다.
`center`	블록들이 교차(수직) 축의 중앙에 위치합니다.
`space-between`	블록들이 교차(수직) 축을 따라 분배되며, 첫 번째 요소는 축의 시작점에, 마지막 요소는 축의 끝점에 붙습니다.
`space-around`	블록들이 교차(수직) 축을 따라 분배되며, 첫 번째 블록과 축 시작점 사이, 마지막 블록과 축 끝점 사이의 간격이 다른 블록들 사이의 간격과 동일합니다. 그러나, 보이는 것처럼 동일하지는 않습니다: 간격이 합산되어 두 블록 사이의 거리는 블록과 축 시작점/끝점 사이 거리의 두 배가 됩니다.

예제 . flex-start 값

이 예제에서 정렬이 이루어지는 축은 위에서 아래 방향, 즉 교차 축입니다. 결과에서 볼 수 있듯이, 우리의 모든 요소들이 그 상단 부분에 붙어 있습니다:

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

#parent {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	height: 200px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . flex-end 값

이 예제에서 블록들은 교차 축의 아래쪽에 붙어 있습니다. 속성 align-content가 값 flex-end로 설정되었기 때문입니다:

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

#parent {
	display: flex;
	align-content: flex-end;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	height: 200px;
	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>

#parent {
	display: grid;
	align-content: start;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	align-content: center;
	grid-template-columns: 100px 100px;
	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>

#parent {
	display: grid;
	align-content: end;
	grid-template-columns: 100px 100px;
	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,
플렉스 블록의 축 방향을 지정합니다.
속성 justify-content,
주 축을 따라 정렬을 지정합니다.
속성 align-items,
교차 축을 따라 정렬을 지정합니다.
속성 flex-wrap,
플렉스 블록의 다중 줄 처리 여부를 지정합니다.
속성 flex-flow,
flex-direction과 flex-wrap을 위한 단축 속성입니다.
속성 order,
플렉스 블록의 순서를 지정합니다.
속성 align-self,
단일 블록의 정렬을 지정합니다.
속성 place-content,
주 축과 교차 축을 따라 정렬을 지정합니다.