CSS justify-self 속성

정의와 사용법

justify-self 속성이 그리드 셀 내에서 행 내 방향에 그리드 아이템을 정렬합니다.

영어 페이지에서는 행 내 방향이 왼쪽에서 오른쪽으로, 블록 방향이 아래로 설정됩니다.

이 속성이 어떤 정렬 효과를 가지려면, 그리드 아이템이 행 내 방향에서 자신 주위에 사용 가능한 공간을 남겨야 합니다.

ヒント:그리드 아이템을 블록 방향 대신 행 내 방향에 정렬하려면 다음을 사용하십시오: align-self 속성 또는 align-items 속성 속성.

자세히 보기:

CSS 가이드:CSS Grid

CSS 가이드:CSS 정위치

CSS 참조 가이드:align-content 속성

CSS 참조 가이드:align-items 속성

CSS 참조 가이드:align-self 속성

CSS 참조 가이드:direction 속성

CSS 참조 가이드:grid 속성

CSS 참조 가이드:grid-template-columns 속성

CSS 참조 가이드:position 속성

CSS 참조 가이드:writing-mode 속성

자세히 보기:

예시

예제 1

그리드 셀의 오른쪽에 그리드 아이템을 정렬합니다：

.red {
  display: grid;
  justify-self: right;
}

직접 시도해 보세요

예제 2: justify-self 대비 justify-items

컨테이너에 대한 정렬 방식을 '중앙'으로 설정하고, 그리드 아이템 본체를 '오른쪽 정렬'로 설정합니다. 속성 값 'right'이 우위를 차지합니다：

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

직접 시도해 보세요

예제 3: 절대 정위치의 그리드 아이템에 justify-self 설정

절대 정위치의 그리드 아이템의 정렬 방식을 'right'로 설정합니다：

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

직접 시도해 보세요

예제 4: writing-mode

그리드 컨테이너 요소의 writing-mode 속성 값이 vertical-rl로 설정되면, 행 내 방향은 아래로 설정됩니다. 결과는 컨테이너의 시작점이 왼쪽에서 위쪽으로 이동하고, 컨테이너의 끝이 오른쪽에서 아래로 이동합니다：

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

직접 시도해 보세요

예제 5: direction

그리드 컨테이너 요소의 direction 속성 값이 'rtl'로 설정되면 행 방향은 오른쪽에서 왼쪽으로 변경됩니다. 결과는 컨테이너의 시작점이 왼쪽에서 오른쪽으로 이동하고, 컨테이너의 끝점이 오른쪽에서 왼쪽으로 이동합니다:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

직접 시도해 보세요

CSS 문법

justify-self: auto|normal|stretch|위치 정렬|overflow-alignment|기본선 정렬|initial|thuộc|;

속성 값

값 설명
auto 기본 값. 그리드 컨테이너의 justify-self 속성 값을 thừa kế합니다.
normal

레이아웃 컨텍스트에 따라 다를 수 있지만, size가 설정되지 않았을 때 그리드 요소가 그리드 레이아웃에서 'stretch'과 유사합니다.

size가 설정되면 속성 값의 행동은 'start'과 유사합니다.
stretch inline-size(너비)가 설정되지 않았으면 그리드 셀을 채우기 위해 확장됩니다.
start 행 방향의 시작에서 프로젝트를 정렬합니다.
left 프로젝트를 왼쪽에 정렬합니다.
center 프로젝트를 중앙에 정렬합니다.
end 행 방향의 끝에서 프로젝트를 정렬합니다.
right 프로젝트를 오른쪽에 정렬합니다.
overflow-alignment
  • 'safe'은 내용이 초과되면 'start'으로 정렬 방식을 설정합니다.
  • 'unsafe'은 내용이 초과되더라도 정렬 값을 유지합니다.
기본선 정렬 요소와 부모 요소의 기본선에 맞춰서 정렬합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
thuộc 부모 요소에서 이 속성을 thừa kế합니다. 참조: thuộc.

기술 세부 사항

기본 값: auto
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.justifySelf="right"

브라우저 지원

표의 숫자는 이 속성을 최초로 완벽하게 지원하는 브라우저 버전을 나타냅니다.

크롬 엣지 파이어폭스 사파리 오페라
크롬 IE / 엣지 파이어폭스 사파리 오페라
57.0 16.0 45.0 10.1 44.0