CSS 플렉스 샤rink 속성

정의와 사용법

flex-shrink 속성은 같은 컨테이너에 고정되어 있으며, 항목이 나머지 유연한 항목에 비해 축소량을 정의합니다.

비고:요소가 유연한 항목이 아니면 flex 속성은 무효입니다.

추가로 참조:

CSS 강의: CSS 유연한 상자

CSS 참조 매뉴얼:flex 속성

CSS 참조 매뉴얼:flex-basis 속성

CSS 참조 매뉴얼:flex-direction 속성

CSS 참조 매뉴얼:flex-flow 속성

CSS 참조 매뉴얼:flex-grow 속성

CSS 참조 매뉴얼:flex-wrap 속성

HTML DOM 참조 매뉴얼:flexShrink 속성

예제

두 번째 유연한 항목이 나머지 항목에 비해 축소량을 세 배로 만듭니다:

div:nth-of-type(2) {
  flex-shrink: 3;
}

직접 시도해 보세요

CSS 문법

flex-shrink: number|initial|inherit;

속성 값

값 설명
number 숫자는 항목이 나머지 유연한 항목에 비해 축소량을 정의합니다. 기본 값은 1입니다.
initial 이 속성을 기본 값으로 설정합니다. 참조 initial.
inherit 이 속성을 부모 요소에서 상속합니다. 참조 inherit.

기술 세부 사항

기본 값: 1
상속: 아니요
애니메이션 제작: 지원됩니다. 참조:애니메이션 관련 속성.
버전: CSS3
JavaScript 문법: object.style.flexShrink="5"

브라우저 지원

표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

prefix를 사용하는 첫 번째 버전의 숫자를 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0