CSS justify-items 속성

정의와 사용법

justify-items 속성은 그리드 컨테이너에서 설정되어, 서브 요소(그리드 아이템)가 행 내 방향으로 정렬됩니다.

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

이 속성이 어떤 정렬 효과를 가지려면, 그리드 아이템이 행 내 방향에서 자신 주위에 공간을 둘 필요가 있습니다.

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

다른 것을 참조하십시오:

CSS 강의:CSS Grid

CSS 강의:CSS 정렬

CSS 참조 매뉴얼:align-items 속성

CSS 참조 매뉴얼:direction 속성

CSS 참조 매뉴얼:grid 속성

CSS 참조 매뉴얼:grid-template-columns 속성

CSS 참조 매뉴얼:justify-self 속성

CSS 참조 매뉴얼:position 속성

CSS 참조 매뉴얼:writing-mode 속성

예제

예제 1

각 그리드 아이템이 그리드 요소의 끝에 행 내 방향으로 정렬됩니다:

#container {
  display: grid;
  justify-items: end;
}

직접 시험해 보세요

예제 2: justify-items와 justify-self 비교

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

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

직접 시험해 보세요

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

절대 위치의 그리드 아이템의 정렬 방식을 '오른쪽 정렬'으로 설정합니다:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

직접 시험해 보세요

예제 4: writing-mode

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

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

직접 시험해 보세요

예제 5: direction

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

#container {
  justify-items: start;
  direction: rtl;
}

직접 시험해 보세요

CSS 문법

justify-items: legacy|normal|stretch|위치 정렬|overflow-alignment|기본선 정렬|initial|inherit;

속성 값

값 설명
legacy

기본 값

제어어 'legacy'로 시작할 때만, justify-self 값이 'auto'인 그리드 아이템은 그리드 컨테이너의 justify-items 속성 값을 thừa kế합니다.

HTML의 <center> 요소와 align 속성의 유산된 정렬 행동을 구현하기 위해 존재합니다.
normal 레이아웃 상황에 따라 다르지만, 그리드 레이아웃의 'stretch'과 유사합니다.
stretch inline-size(폭)이 설정되지 않았을 때, 그리드 셀을 채우기 위해 확장됩니다.
start 행 내 방향의 시작에서 프로젝트를 정렬합니다.
left 프로젝트를 왼쪽에 정렬합니다.
center 프로젝트를 중앙에 정렬합니다.
end 행 내 방향의 끝에서 프로젝트를 정렬합니다.
right 프로젝트를 오른쪽 정렬합니다.
overflow-alignment
  • 'safe'은 내용이 흐름을 넘어가면 프로젝트의 정렬 방식을 'start'으로 설정합니다.
  • 'unsafe'은 내용이 흐름을 넘어가도록 무시하고 정렬 값을 유지합니다.
baseline-alignment 요소와 부모 요소의 기본선에 맞춰서 정렬합니다.
initial 이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit 부모 요소에서 이 속성을 thừa kế합니다. 참고: inherit.

기술 세부 사항

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

브라우저 지원

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

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