place-items

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

브라우저 호환성

BCD tables only load in the browser

같이 보기