align-self

사용법

열 축을 따라 그리드 아이템 내부 콘텐츠를 정렬합니다. (열 축에 따라 정렬하는 justify-self 속성과는 반대)

속성

값(공통)

비고

align-self

start

center

end

stretch

기본 값

값

설명

start

그리드 아이템 영역 열 축 시작점에 콘텐츠를 정렬

center

그리드 아이템 영역 열 축 중앙에 콘텐츠를 정렬

end

그리드 아이템 영역 행 축 끝점에 콘텐츠를 정렬

stretch

그리드 아이템 영역을 열 축에 가득 채움

예시

열 축 기준 아이템 내부 콘텐츠 정렬을 시작점으로 설정합니다.

.item-a {
  align-self: start;
}

열 축 기준 아이템 내부 콘텐츠 정렬을 중앙으로 설정합니다.

.item-a {
  align-self: center;
}

열 축 기준 아이템 내부 콘텐츠 정렬을 끝점에 설정합니다.

.item-a {
  align-self: end;
}

열 축 기준 아이템 내부 콘텐츠 정렬을 가득 채움으로 설정합니다.

.item-a {
  align-self: stretch;
}

Last updated 5 years ago