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

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

목차
  1. flex-shrink 예제 - 다른 아이템에 비해 줄어들 정도 지정
  2. flex-shrink 정의
  3. flex-shrink 구문
  4. flex-shrink 관련 주소

 

flex-shrink 예제 - 다른 아이템에 비해 줄어들 정도 지정

 

<style> 

#hz {

  width: 350px;

  height: 100px;

  border: 1px solid silver;

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

  display: flex;

}


#hz div {

  /* Safari 6.1+ */

  -webkit-flex-grow: 1; 

  -webkit-flex-shrink: 1;

  -webkit-flex-basis: 100px;

   /* 표준 구문 */

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: 100px;

}


#hz div:nth-of-type(2) {

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

  flex-shrink: 3;

}

</style>


<div id="hz">

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

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

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

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

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

</div>

 

결과보기


flex-shrink 정의

 

동일컨테이너 안 나머지 플렉스아이템에 비해 얼마나 줄어들지 지정.

 


 

1.

요소가 플렉스아이템 (flexible item : 유연한 항목) 아닌 경우, 적용 안 됨.

 

2.

기본값: 1

상속여부: X

애니효과: O

CSS버전: CSS3

JS구문: object.style.flexShrink="5"

 

3.

IE 10 이상 주요 최신 브라우저 지원.

일부 구형 브라우저는 브라우저접두어 필요.

 

 

flex-shrink 구문

 

selector {flex-shrink : number|initial|inherit;}

 


[속성값]

 

number

다른 플렉스아이템에 비해 얼마나 줄어들지 지정. 기본값 1

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소 속성값 상속.

 

※ shrink :  외래어표기법 상, 「슈링크」가 맞음.

 

flex-shrink 관련 주소

 

mdn flex-shrink 강의

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink (영어)

https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink (한국어)

 


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

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