목차
- place-content 예제 - flex에서 (수직정렬/수평정렬) 일괄 지정
- place-content 정의
- place-content 구문
- place-content 예제 - grid에서 (수직정렬/수평정렬) 일괄 지정
place-content 예제 - flex에서 (수직정렬/수평정렬) 일괄 지정
<style>
#container {
height: 300px;
width: 60%;
border: 1px solid gray;
display: flex;
flex-wrap: wrap;
place-content: end space-between;
}
#container > div {
flex-basis: 50px;
height: 50px;
margin: 2px;
background-color: pink;
}
</style>
<div id="container">
<script>
document.addEventListener('DOMContentLoaded', function () {
var container = document.getElementById('container');
for (var i = 0; i < 14; i++) {
var div = document.createElement('div');
container.appendChild(div);
}
});
</script>
</div>
결과보기
place-content 정의
(flex/grid) 레이아웃에서 (수직정렬/수평정렬) 일괄 지정.
1. 아래 2개 속성을 한번에 지정 가능.
2. 속성값 개수별 의미
- 속성값이 2개 지정된 경우 (예: a b) - a:수직 / b:수평
- 속성값이 1개 지정된 경우 (예: a) - 수직/수평 모두 a
3.
- 기본값: normal
- 상속여부: X
- 애니가능: X
- CSS버전: CSS3
- JS구문: object.style.placeContent="end space-around";
4.
IE 제외한 주요 최신 브라우저 모두 지원.
5. MDN place-content 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
place-content 구문
selector {place-content: normal|value|value1 value2|initial|inherit;}
[속성값]
normal
레이아웃 컨텍스트에 따라 다름. align-content 및 justify-content에 속성값 설정 안 한 것과 같음. (기본값)
value
(align-content / justify-content) 속성에 동일 속성값 적용.
value1 value2
value1 (= align-content 속성값), value2 (= justify-content 속성값)
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
place-content 예제 - grid에서 (수직정렬/수평정렬) 일괄 지정
<style>
#container {
height: 300px;
width: 60%;
border: 1px solid black;
display: grid;
place-content: space-around center;
}
#container > div {
inline-size: 100px;
block-size: 50px;
margin: 2px;
background-color: pink;
}
</style>
<div id="container">
<script>
document.addEventListener('DOMContentLoaded', function () {
var container = document.getElementById('container');
for (var i = 0; i < 4; i++) {
var div = document.createElement('div');
container.appendChild(div);
}
});
</script>
</div>
결과보기
