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
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 |
Computed value | as specified |
Animation type | a number |
Browser compatibility
BCD tables only load in the browser
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.
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