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.

CSSplace-items 단축 속성그리드 혹은 플렉스박스 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 (예를 들어, align-itemsjustify-items 속성) 한번에 요소들을 정렬합니다. 만일 두번째 값이 지정되지 않는다면, 첫번째 값이 두번째 값으로도 사용됩니다.

시도해보기

구성 속성

이 속성은 다음 CSS의 단축형입니다.

구문

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 typediscrete

형식 구문

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

css
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* 리스트에 있는 다른 옵션을 선택하여 값을 변경할 수 있습니다. */
  background-color: #8c8c8c;
  display: flex;
}

결과ㄴ

그리드 컨테이너에 요소 배치하기

다음 그리드 컨테이너는 요소들이 배치된 그리드 영역보다 작기 때문에 place-items 는 요소들을 블록과 인라인 차원에서 요소들을 이동시킵니다.

CSS

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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
place-items
anchor-center
Experimental
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.

같이 보기