align-self 속성

align-self 속성은 개별적으로 지정된 플렉스 블록의 교차 축 정렬 및 그리드에서 개별 요소의 수직 축 정렬을 설정합니다. 본질적으로 이 속성은 align-items 속성을 특정 블록에 대해 적용하는 것과 같습니다.

구문

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

값

값	설명
`flex-start`	블록이 교차 축의 시작점에 맞춰집니다.
`flex-end`	블록이 교차 축의 끝점에 맞춰집니다.
`center`	블록이 교차 축의 중앙에 위치합니다.
`baseline`	블록이 자신의 기준선에 맞춰 정렬됩니다. 기준선은 아래쪽 돌기가 없는 글자들(예: 'p', 'q', 'y', 'g' 등의 글자)의 하단을 지나는 가상의 선입니다.
`stretch`	블록이 교차 축을 따라 사용 가능한 모든 공간을 차지하도록 늘어납니다. 단, `min-width` 및 `max-width`가 지정된 경우 이를 고려합니다. 요소에 너비와 높이가 지정된 경우 - `stretch`는 무시됩니다.
`auto`	블록은 `align-items` 속성에 지정된 대로 정렬됩니다.

기본값: auto.

예시 . stretch 값

이 예시에서는 모든 블록에 flex-start 값이 지정되었습니다(align-items 속성). 세 번째 블록에는 align-self 속성에 stretch 값이 지정되었습니다:

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

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

예시 . flex-end 값

이 예시에서는 align-items 속성에 모든 블록에 대해 flex-start 값이 지정되었고, 세 번째 블록에는 align-self 속성에 flex-end 값이 지정되었습니다:

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

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

예시 . 그리드에서 수직 축 시작점 정렬

첫 번째 요소를 수직 축의 시작점에 맞춰 정렬해 보겠습니다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

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

예시 . 그리드에서 수직 축 중앙 정렬

첫 번째 요소를 수직 축의 중앙에 맞춰 정렬해 보겠습니다:

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

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

예시 . 그리드에서 수직 축 끝점 정렬

그리드에서 첫 번째 요소를 수직 축의 끝점에 맞춰 정렬해 보겠습니다:

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

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

함께 보기

플렉스 블록의 축 방향을 설정하는 속성 flex-direction
주축 정렬을 설정하는 속성 justify-content
교차 축 정렬을 설정하는 속성 align-items
플렉스 블록의 다중 줄 바꿈을 설정하는 속성 flex-wrap
flex-direction과 flex-wrap의 단축 속성 flex-flow
플렉스 블록의 순서를 설정하는 속성 order
특정 플렉스 블록의 크기를 설정하는 속성 flex-basis
플렉스 블록의 확장 비율을 설정하는 속성 flex-grow
플렉스 블록의 축소 비율을 설정하는 속성 flex-shrink
flex-grow, flex-shrink 및 flex-basis의 단축 속성 flex