CSS place-self 속성

정의와 사용법

place-self 속성은 단일 그리드 아이템을 정렬하는 데 사용되며, 다음 속성의 약자입니다：

place-self 속성 값이 두 가지 있을 때:

place-self: start center;
  • align-self 속성 값이 'start'입니다
  • justify-self 속성 값이 'center'입니다

place-self 속성 값이 하나만 있을 때:

place-self: end;
  • align-self과 justify-self 속성 값이 모두 'end'입니다

예제

예제 1

단일 그리드 아이템을 블록 방향과 행 내 방향 모두 끝 위치에 정렬합니다：

#myDiv {
  place-self: end;
}

직접 테스트해 보세요

예제 2: 쓰기 모드

제 <div> 요소의 writing-mode 속성 값이 'vertical-rl'로 설정되면, 그리드 셀의 블록 방향의 끝 위치가 하단에서 왼쪽으로 이동하고, 행 내 방향의 끝 위치가 오른쪽에서 하단으로 이동합니다：

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

직접 테스트해 보세요

예제 3: 그리드 레이아웃

place-self 속성도 그리드 레이아웃 아이템에 사용될 수 있지만 justify-self 의 두 번째 값은 무시됩니다. 왜냐하면 그리드 레이아웃에서는 적용되지 않기 때문입니다:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

직접 테스트해 보세요

CSS 문법

place-self: auto|value|initial|inherit;

속성 값

값 설명
auto 기본. 요소의 기본 place-self 값
normal

레이아웃 상황에 따라, 크기가 설정되지 않은 그리드 아이템의 행동은 그리드 레이아웃의 'stretch'과 유사합니다

크기가 설정되면 속성 값의 행동은 'start'과 유사합니다
stretch 크기가 설정되지 않았으면 너비를 확장하여 그리드 셀을 가득 채웁니다
start 행 내 방향과 블록 방향으로 아이템을 시작 위치에 정렬합니다
left 행 내 방향으로 아이템을 왼쪽에 정렬하여 justify-self 속성 값으로 사용합니다
center 아이템을 중앙에 정렬합니다
end 행 내 방향과 블록 방향으로 아이템을 끝 위치에 정렬합니다
right 행 내 방향으로 아이템을 오른쪽에 정렬하여 justify-self 속성 값으로 사용합니다
overflow-alignment

'safe'：내용이 부족하면 프로젝트 정렬을 'start'으로 설정합니다

'unsafe'：프로젝트 내용이 부족하거나 많아도 정렬 값을 유지합니다
기본선 정렬 요소와 부모 요소의 기본선에 맞춰 정렬합니다。
initial 이 속성을 기본값으로 설정합니다. 참조: initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참조: inherit。

기술 세부 사항

기본값: auto
상속성: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.placeSelf="end stretch"

浏览器支持

표中的数字表示支持该属性的第一个浏览器的版本。

크롬 에지 파이어폭스 사파리 오페라
59.0 79.0 45.0 11.0 46.0

相关页面

CSS 그리드 레이아웃CSS 网格布局

CSS 그리드 레이아웃강의:

CSS 엘라스틱 블록 레이아웃CSS align-self 속성

CSS 엘라스틱 블록 레이아웃CSS justify-self 속성

CSS 엘라스틱 블록 레이아웃CSS 월링-모드 속성