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 2020년 1월.
* Some parts of this feature may have varying levels of support.
CSS 의 place-items 단축 속성 은 그리드 혹은 플렉스박스 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 (예를 들어, align-items 와 justify-items 속성) 한번에 요소들을 정렬합니다. 만일 두번째 값이 지정되지 않는다면, 첫번째 값이 두번째 값으로도 사용됩니다.
시도해 보기
place-items: center stretch; place-items: center start; place-items: start end; place-items: end center; <section class="default-example" id="default-example"> <div class="example-container"> <div class="transition-all" id="example-element"> <div>One</div> <div>Two</div> <div>Three</div> </div> </div> </section> #example-element { border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 220px; } #example-element > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; } 구성 속성
이 속성은 다음 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 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
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 |
브라우저 호환성
같이 보기
- 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속성