CSS place-content 속성

정의와 사용법

place-content 속성은 엘라스틱 박스(flexbox)와 그리드(grid) 레이아웃에 사용되며 다음 속성의 약자입니다：

place-content 속성이 두 가지 값이 있을 경우:

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

place-content 속성이 하나의 값만 있을 경우:

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

예제

예제 1

적대적 행을 엘라스틱 컨테이너 바닥에 정렬하고 수평 방향으로 엘라스틱 아이템 간의 간격을 같게 합니다：

#container {
  display: flex;
  place-content: end space-between;
}

직접 테스트해 보세요

예제 2: 그리드 레이아웃

막대 방향의 추가 공간은 각 그리드 항목 주위에 균일하게 배치되며, 그리드 항목은 행 내 방향으로 중앙 정렬됩니다：

#container {
  display: grid;
  place-content: space-around center;
}

직접 테스트해 보세요

CSS 문법

place-content: normal|value|initial|inherit;

속성 값

값 설명
normal

기본 값。레이아웃 상황에 따릅니다。

align-content 및 justify-content 속성 값이 설정되지 않은 경우와 동일합니다。
stretch

그리드 레이아웃：크기를 설정하지 않으면 그리드 항목이 그리드 컨테이너를 채우기 위해 확장됩니다。

휠형 레이아웃：휠형 항목이 교차축에서 크기를 지정하지 않으면 교차축에서 휠형 컨테이너를 채우기 위해 확장됩니다。
start 항목을 컨테이너의 시작 위치에 정렬합니다。
end 항목을 컨테이너의 끝 위치에 정렬합니다。
center 항목을 컨테이너의 중앙 위치에 정렬합니다。
space-between 컨테이너의 두 축에서 사용 가능한 공간을 균일하게 배치하여 항목 간의 간격을 같게 합니다。
space-around 컨테이너의 두 축에서 사용 가능한 공간을 균일하게 배치하여 각 항목 주위의 간격을 같게 합니다。
space-evenly 컨테이너의 두 축에서 항목을 균일하게 배치합니다。
overflow-alignment

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

'unsafe'：프로젝트 내용이 부족하거나 많을지 관계없이 정렬 값을 변하지 않습니다。
initial 이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit 이 속성을 부모 요소에서 상속합니다. 참조: inherit。

기술 세부 사항

기본 값： normal
thừa kế성： 아니요
애니메이션 제작： 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전： CSS3
JavaScript 문법： object.style.placeContent="end space-around"

브라우저 지원

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

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

相关页面

教程：CSS 그리드 레이아웃

教程：CSS 휠형 레이아웃

참조：CSS align-content 속성

참조：CSS justify-content 속성

참조：HTML DOM alignContent 속성