flex-grow
CSS property 는 flex-item
요소가, flex-container
요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item
요소들이 동일한 flex-grow
값을 갖는다면, flex-container
내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow
값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.
보통 flex-grow
를 사용할땐, flex-shrink
, flex-basis
속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 flex
속성을 이용해 축약형으로 사용합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* <number> values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset;
flex-grow
속성에 대한 값은 <number>
단독으로 표현합니다.
Values
Formal syntax
<number>
Example
HTML
<h4>This is a Flex-Grow</h4> <h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>
CSS
#content { display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch; } .box { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 2; border: 3px solid rgba(0,0,0,.2); }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-grow' in that specification. |
Candidate Recommendation | Initial definition |
초기값 | 0 |
---|---|
적용대상 | flex items, including in-flow pseudo-elements |
상속 | no |
Media | visual |
Computed value | as specified |
Animation type | a number |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome
Full support
29
| Edge
Full support
12
| Firefox
Full support
20
| IE
Full support
11
| Opera
Full support
12.1
| Safari
Full support
6.1
| WebView Android
Full support
4.4
| Chrome Android
Full support
29
| Edge Mobile
Full support
Yes
| Firefox Android
Full support
20
| Opera Android
Full support
12.1
| Safari iOS ? | Samsung Internet Android ? |
<0 animate | Chrome Full support 49 | Edge ? | Firefox
Full support
32
| IE ? | Opera No support No | Safari No support No | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android
Full support
32
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis
- `flex-grow` is weird. Or is it? article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works