[DOM_Style] JS - flexShrink 속성 - 동일컨테이너 안 나머지 플렉스아이템에 비해 얼마나 줄어들지 지정 (= 플렉스슈링크속성, 플렉스시링크속성, IE11)

flexShrink 예제

 

<style> 

#hz {

  width: 350px;

  height: 100px;

  border: 1px solid silver;

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

  display: flex;

}

#hz div {

  -webkit-flex-grow: 1; /* Safari 6.1+ */

  -webkit-flex-shrink: 1; /* Safari 6.1+ */

  -webkit-flex-basis: 300px; /* Safari 6.1+ */

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: 300px;

}

</style>

<div id="hz">

  <div style="background-color:coral;" id="sinbi">홈짱닷컴</div>

  <div style="background-color:lightblue;">Homzzang.com</div>

</div>

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

<script>

function homzzang() {

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

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

}

</script>

 

결과보기

 정의 

 

 

 

---

 

 

.

기본값: 

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

CSS속성: 
CSS버전: CSS

4.

브라우저 지원. 

 

 구문 

 

[접근]

 

 

[설정]

 

---

 

[속성값]