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

1. flex-shrink 예제 - 다른 아이템에 비해 줄어들 정도 지정
2. flex-shrink 정의
3. 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 이상 주요 최신 브라우저 지원.
• 일부 구형 브라우저는 브라우저접두어 필요.

 

4. MDN flex-shrink 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

 

flex-shrink 구문

 

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

 

---

[속성값]

 

number

다른 플렉스아이템에 비해 몇 배로 더 줄어들지 지정. (기본값 1)

(0 이상 가능하며, 0은 축소 안 함 의미함.)

 

initial

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

 

inherit

부모요소 속성값 상속.

 

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