flex-grow 속성

flex-grow 속성은 필요할 경우 개별 flex 블록이 인접한 요소들보다 얼마나 더 커질 수 있는지를 결정합니다.

예를 들어, flex 컨테이너 내부의 모든 flex 블록이 flex-grow:1를 가지고 있다면, 그들은 동일한 크기가 됩니다. 만약 그 중 하나가 flex-grow:2를 가지고 있다면, 그 요소는 나머지 모든 요소보다 2배 더 커집니다.

요소들의 총 너비가 부모의 너비보다 작아 오른쪽에 빈 공간이 남게 됩니다. 원한다면 이 빈 공간을 요소들 사이에 비례적으로 나눌 수 있습니다. 이는 flex 요소에 지정하는 flex-grow 속성을 사용하여 수행됩니다. 이 속성의 값은 단위가 없는 숫자입니다.

적용 대상: 특정 flex 블록.

이 속성은 단축 속성인 flex의 일부입니다.

문법

선택자 {
	flex-grow: 양수;
}

기본값: 0.

예제

지금 우리에게는 너비가 100px인 두 개의 flex 블록이 있습니다. 요소들의 총 너비는 200px이고, 부모의 너비는 300px입니다. 결과적으로 100px의 빈 공간이 남게 됩니다.

요소에 flex-grow가 지정되지 않았다면, 우리는 단순히 이 빈 공간을 보게 됩니다. 그러나 지정되었다면, 요소의 실제 너비는 지정된 값보다 커질 것입니다. 요소들은 빈 공간을 서로 비례적으로 나누어 자신의 너비에 추가할 것입니다.

예를 들어 첫 번째 요소의 flex-grow가 1이고, 두 번째 요소는 3라고 합시다. 각 요소가 빈 공간 중 얼마를 얻을지 계산해 봅시다.

먼저 우리 요소들의 총 flex-grow 단위 수를 구해야 합니다. 첫 번째 요소는 1이고, 두 번째 요소는 3입니다. 이는 합계가 4라는 의미입니다.

이제 100px 빈 공간을 4로 나누면, 한 단위의 flex-grow당 25px가 할당됨을 알 수 있습니다. 결과적으로, 첫 번째 요소에는 한 단위의 flex-grow, 즉 25px가 추가되고, 두 번째 요소에는 세 단위, 즉 75px가 추가됩니다.

첫 번째 요소의 너비는 125px가 되고, 두 번째 요소의 너비는 175px가 됩니다:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 3;
}

예제

이제 부모의 너비가 400px이고, 첫 번째 요소의 너비는 200px, 두 번째 요소의 너비는 100px라고 가정해 봅시다. 결과적으로, 빈 공간은 다시 100px가 됩니다.

각 요소에 flex-grow를 1로 설정해 봅시다. 합계는 2가 되므로, 100px 빈 공간을 2로 나누어야 합니다. 그 결과 탐욕 한 단위당 50px가 할당됩니다.

모든 요소가 동일한 flex-grow 값을 가지므로, 모든 요소에 동일한 50px 값이 추가됩니다. 이는 첫 번째 요소가 250px가 되고, 두 번째 요소가 150px가 된다는 의미입니다:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

예제

부모 너비가 다시 400px이고, 첫 번째 요소 너비가 200px, 두 번째 요소 너비가 100px라고 가정해 봅시다.

이제 첫 번째 요소의 flex-grow를 3로, 두 번째 요소를 1로 설정해 봅시다. 결과적으로 탐욕 합계는 4가 됩니다. 그러면 한 단위의 탐욕은 100px / 4 = 25px와 같습니다.

첫 번째 요소에는 75px가 추가되어 275px가 되고, 두 번째 요소에는 25px가 추가되어 125px가 됩니다:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

함께 보기

flex 블록의 축 방향을 설정하는 속성 flex-direction
주축에 따른 정렬을 설정하는 속성 justify-content
교차축에 따른 정렬을 설정하는 속성 align-items
flex 블록의 다중 행 설정을 지정하는 속성 flex-wrap
flex-direction과 flex-wrap의 단축 속성인 flex-flow
flex 블록의 순서를 설정하는 속성 order
단일 블록의 정렬을 설정하는 속성 align-self
특정 flex 블록의 크기를 설정하는 속성 flex-basis
flex 블록의 수축성을 설정하는 속성 flex-shrink
flex-grow, flex-shrink, flex-basis의 단축 속성인 flex