CSS flex-grow 속성
예시
두 번째 플렉스 항목이 나머지 항목보다 3배 더 넓어지도록 합니다.
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
정의 및 사용
flex-grow
속성은 동일한 컨테이너 내부의 나머지 유연한 항목에 비해 항목이 얼마나 커질 것인지 지정합니다 .
참고: 요소가 유연한 항목이 아닌 경우 flex-grow
속성이 적용되지 않습니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
flex-grow | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS 구문
flex-grow: number|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
number | A number specifying how much the item will grow relative to the rest of the flexible items. Default value is 0 | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 튜토리얼: CSS Flexible Box
CSS 참조: flex 속성
CSS 참조: 플렉스 기반 속성
CSS 참조: flex-direction 속성
CSS 참조: flex-flow 속성
CSS 참조: flex-shrink 속성
CSS 참조: flex-wrap 속성
HTML DOM 참조: flexGrow 속성