CSS Flex 요소의 늘어남(flex-grow)
현재 두 개의 flex 블록이 나란히 놓여 있다고 가정해 봅시다.
이 블록들의 너비는
100px로 설정되어 있고, 부모 요소의 너비는 300px입니다:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
보시다시피, 요소들의 총 너비가 부모의 너비보다 작기 때문에 오른쪽에 빈 공간이 남습니다.
필요하다면 이 남는 공간을 요소들 사이에 비례적으로 나눌 수 있습니다.
이것은 flex 요소에 지정되는 flex-grow 속성을 통해 이루어집니다. 이 속성의 값은 단위가 없는 숫자입니다.
이 속성이 어떻게 작동하는지 실제로 살펴보겠습니다.
예시
현재 우리에게는 너비가
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로 나누어야 합니다.
결과적으로 flex-grow 한 단위당 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으로 설정해 봅시다.
그러면 flex-grow 총합은 4가 됩니다. 그러면 flex-grow 한 단위는 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-grow 값을 가진 flex 요소들이 있는 코드가 주어집니다.
제공된 코드를 기반으로 각 요소가 어떤 크기를 가질지 계산하세요.
그런 다음 코드를 실행하고 실제 요소 너비를 측정하여 계산을 확인하세요.
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
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;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}
