flex-grow

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 9월⁩.

* Some parts of this feature may have varying levels of support.

flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.

보통 flex-grow를 사용할땐, flex-shrink, flex-basis 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 flex 속성을 이용해 축약형으로 사용합니다.

시도해 보기

flex-grow: 1;

flex-grow: 2;

flex-grow: 3;

<section class="default-example" id="default-example"> <div class="transition-all" id="example-element">I grow</div> <div>Item Two</div> <div>Item Three</div> </section>

.default-example { border: 1px solid #c5c5c5; width: auto; max-height: 300px; display: flex; } .default-example > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; margin: 10px; flex-grow: 1; flex-shrink: 1; flex-basis: 0; }

Syntax

css

/* <number> values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset;

flex-grow 속성에 대한 값은 <number> 단독으로 표현합니다.

Values

<number>: 관련 링크를 참고하세요. <number>. 단, 음수값은 허용되지 않습니다.

Formal syntax

flex-grow = 
 <number [0,∞]>

Example

HTML

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

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, 0.2); } .box1 { flex-grow: 2; border: 3px solid rgba(0, 0, 0, 0.2); }