justify-self

사용법

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

속성

값(공통)

비고

justify-self

start

center

end

stretch

기본 값

값

설명

start

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

center

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

end

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

stretch

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

예시

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

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

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

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

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

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

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

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

Last updated 5 years ago