[css] CSS - place-content 속성(C) - (flex/grid) 레이아웃에서 (수직정렬/수평정렬) 일괄 지정 (= place-content속성 = 플레이스콘텐트속성/플레이스컨텐트속성)

1. place-content 예제 - flex에서 (수직정렬/수평정렬) 일괄 지정
2. place-content 정의
3. place-content 구문
4. 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개 속성을 한번에 지정 가능.

• align-content 속성 - 교차축 (≒ 수직축) 정렬 지정.
• justify-content 속성 - 기본축 (≒ 수평축) 정렬 지정.

 

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>

 

결과보기