place-items
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
* Some parts of this feature may have varying levels of support.
CSS 의 place-items
단축 속성 은 그리드 혹은 플렉스박스 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 (예를 들어, align-items
와 justify-items
속성) 한번에 요소들을 정렬합니다. 만일 두번째 값이 지정되지 않는다면, 첫번째 값이 두번째 값으로도 사용됩니다.
시도해보기
구성 속성
이 속성은 다음 CSS의 단축형입니다.
구문
/* 키워드 값 */
place-items: center;
place-items: normal start;
/* 위치 정렬 */
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
/* 기준선 정렬 */
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;
/* 전역 값 */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: revert-layer;
place-items: unset;
값
아래 형태 중 하나의 값을 취합니다.
- 블록 방향과 인라인 방향 모두를 설정하기 위한 정렬 단일
align-items
값. - 블록 방향의 정렬을 설정하기 위한
align-items
값, 인라인 방향의 정렬을 설정하기 위한justify-items
값.
형식 정의
초기값 | as each of the properties of the shorthand:
|
---|---|
적용대상 | all elements |
상속 | no |
계산 값 | as each of the properties of the shorthand:
|
Animation type | discrete |
형식 구문
place-items =
<'align-items'> <'justify-items'>?
<align-items> =
normal |
stretch |
<baseline-position> |
[ <overflow-position>? <self-position> ] |
anchor-center
<justify-items> =
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
legacy |
legacy && [ left | right | center ] |
anchor-center
<baseline-position> =
[ first | last ]? &&
baseline
<overflow-position> =
unsafe |
safe
<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end
예제
플렉스 컨테이너에 요소 배치하기
플렉스박스에서는 주축 요소가 하나의 그룹으로 취급되기 때문에 justify-self
혹은 justify-items
가 적용되지 않습니다. 따라서 두번째 값은 무시됩니다.
CSS
#container {
height: 200px;
width: 240px;
place-items: stretch; /* 리스트에 있는 다른 옵션을 선택하여 값을 변경할 수 있습니다. */
background-color: #8c8c8c;
display: flex;
}
결과ㄴ
그리드 컨테이너에 요소 배치하기
다음 그리드 컨테이너는 요소들이 배치된 그리드 영역보다 작기 때문에 place-items
는 요소들을 블록과 인라인 차원에서 요소들을 이동시킵니다.
CSS
#gridcontainer {
height: 200px;
width: 240px;
place-items: stretch; /* 리스트에 있는 다른 옵션을 선택하여 값을 변경할 수 있습니다. */
background-color: #8c8c8c;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#gridcontainer > div {
width: 50px;
}
결과
명세서
Specification |
---|
CSS Box Alignment Module Level 3 # place-items-property |
브라우저 호환성
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
place-items | ||||||||||||
anchor-center | ||||||||||||
Supported in Flex Layout | ||||||||||||
Supported in Grid Layout |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
같이 보기
- CSS 플렉스박스 가이드: Basic Concepts of Flexbox
- CSS 플렉스박스 가이드: Aligning items in a flex container
- CSS 그리드 가이드: Box alignment in CSS Grid layouts
- CSS Box Alignment
align-items
속성align-self
속성justify-items
속성justify-self
속성