• Q&A
  • 회원가입
  • 로그인

[DOM_Style] JS - flexGrow 속성 - 동일컨테이너 안 나머지 플렉스아이템에 비해 얼마나 커질지 지정 (= 플렉스그로속성, IE11)

flexGrow 예제

 

<style> 

#hz {

  width: 350px;

  height: 100px;

  border: 1px solid #c3c3c3;

  display: -webkit-flex; /* Safari */

  display: flex;

}


/* Safari 6.1+ */

#hz div:nth-of-type(1) {-webkit-flex-grow: 1;}

#hz div:nth-of-type(2) {-webkit-flex-grow: 1;}

#hz div:nth-of-type(3) {-webkit-flex-grow: 1;}


/* 표준 구문 */

#hz div:nth-of-type(1) {flex-grow: 1;}

#hz div:nth-of-type(2) {flex-grow: 1;}

#hz div:nth-of-type(3) {flex-grow: 1;}

</style>


<div id="hz">

  <div style="background-color:coral;"></div>

  <div style="background-color:lightblue;" id="sinbi"></div>

  <div style="background-color:khaki;"></div>

</div>


<button onclick="homzzang()">클릭</button>


<script>

function homzzang() {

  document.getElementById("sinbi").style.WebkitFlexGrow = "5"; // Safari 6.1+

  document.getElementById("sinbi").style.flexGrow = "5";

}

</script>


결과보기


 

 정의 

 

 

 


 

 

.

기본값: 

반환값: 를 나타내는 문자열

CSS속성: 
CSS버전: CSS

4.

브라우저 지원. 

 

 

 

 구문 

 

[접근]

 

 

[설정]


 


 

[속성값]

 

 

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012