align-items 속성

align-items 속성은 flex 컨테이너의 교차 축과 그리드의 수직 축을 따라 자식 요소들을 정렬하는 방법을 지정합니다. 부모 요소(컨테이너)에 적용됩니다.

구문

선택자 {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

값

값	설명
`flex-start`	요소들이 교차 축(수직 축)의 시작점에 정렬됩니다.
`flex-end`	요소들이 교차 축(수직 축)의 끝점에 정렬됩니다.
`center`	요소들이 교차 축(수직 축)의 중앙에 정렬됩니다.
`baseline`	요소들이 각자의 베이스라인에 맞춰 정렬됩니다. 베이스라인이란 'p'나 'y'와 같은 글자의 아래쪽 돌출부를 제외한 글자 하단을 지나는 가상의 선입니다.
`stretch`	요소들이 교차 축 방향으로 사용 가능한 모든 공간을 차지하도록 늘어납니다. 이때 `min-width`나 `max-width`(또는 `min-height`, `max-height`)가 지정되어 있다면 해당 제약을 따릅니다. 요소에 명시적인 너비나 높이가 지정되어 있으면 `stretch`는 무시됩니다.

기본값: stretch.

예제 . stretch 값

현재 주 축은 좌에서 우로 향하며, 교차 축을 따라 요소들이 전체 높이로 늘어납니다:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

예제 . stretch 값 + 요소 크기 지정

현재 요소들에 너비와 높이가 지정되어 있으므로, align-items 속성의 stretch 값은 무시됩니다:

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

#parent {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . flex-start 값 (요소 크기 미지정)

현재 요소들이 상단에 정렬됩니다:

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

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	border: 1px solid #696989;
}

예제 . flex-start 값 + 요소 크기 지정

요소들은 여전히 상단에 정렬되지만, 이번에는 지정된 너비와 높이를 가집니다:

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

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

예제 . flex-end 값 + 요소 크기 지정

현재 요소들이 하단에 정렬됩니다:

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

#parent {
	display: flex;
	align-items: 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;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . center 값, 요소 크기가 다른 경우

현재 요소들의 높이가 서로 다릅니다 (텍스트 내용에 따라 달라지지만, height를 지정해도 됩니다). width 속성이 지정되어 있어 너비는 모두 동일합니다:

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

#parent {
	display: flex;
	align-items: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	border: 1px solid #696989;
}

예제 . baseline 값, 요소 크기가 다른 경우

베이스라인 정렬은 다음과 같이 표시됩니다:

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

#parent {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 130px;
	line-height: 1;
	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;
	align-items: flex-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>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: 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 id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

이제 개발자 도구를 통해 그리드가 어떻게 보이는지 확인해 보겠습니다:

함께 보기

flex-direction 속성,
Flex 컨테이너의 축 방향을 지정합니다.
justify-content 속성,
주 축을 따라 요소를 정렬합니다.
align-items 속성,
교차 축을 따라 요소를 정렬합니다.
flex-wrap 속성,
Flex 요소의 여러 줄 배치를 제어합니다.
flex-flow 속성,
flex-direction와 flex-wrap의 단축 속성입니다.
order 속성,
Flex 항목의 배치 순서를 지정합니다.
align-self 속성,
개별 Flex 항목의 정렬 방식을 지정합니다.
flex-basis 속성,
Flex 항목의 초기 크기를 지정합니다.
flex-grow 속성,
Flex 항목이 남는 공간을 얼마나 나누어 가질지 지정합니다.
flex-shrink 속성,
Flex 항목이 공간이 부족할 때 얼마나 줄어들지 지정합니다.
flex 속성,
flex-grow, flex-shrink, flex-basis의 단축 속성입니다.