CSS 심화 공부(8) - flex item 속성(2) : flex grow

프로그래밍/css 심화

CSS 심화 공부(8) - flex item 속성(2) : flex grow

lamarcK 2025. 3. 13. 13:43

플렉스 박스를 사용하다 보면 콘테이너의 크기 대비 아이템의 크기가 작아서 여유 공간이 많이 남는 경우가 있다.

이럴 경우 플렉스 아이템의 크기를 컨테이너에 맞게 채우고 싶을 수가 있는데 그럴 경우 사용하는 것이 바로 flex-grow이다.

flex-grow

CSS Flexbox 레이아웃에서 사용되는 속성으로, 플렉스 컨테이너 내에서 플렉스 아이템이 사용 가능한 공간을 어떻게 분배할지 결정한다.

flex-grow에 할당된 값은 플렉스 아이템이 얼마나 늘어날 수 있는지를 나타내는 비율이다.

인테리어로 비유하자면 가구가 차지하는 공간을 여유 공간 만큼 더 늘리는 것이다.

flex-grow의 속성

기본값 : flex-grow의 기본값은 0이다. 즉, 기본적으로 플렉스 아이템은 컨테이너 내에서 남는 공간을 채우기 위해 늘어나지 않는다.
양수 값 : flex-grow에 양수 값을 할당하면 플렉스 아이템은 컨테이너 내에서 남는 공간을 지정된 비율에 따라 채우도록 늘어난다. (음수를 할당해서 크기를 줄이는 것은 불가능하다. 만약 음수를 넣는다면 0으로 취급해서 작동하지 않는다.)
비율 : flex-grow 값은 다른 플렉스 아이템과의 상대적인 비율을 나타낸다. 예를 들어, 두 개의 플렉스 아이템이 있고 각각 flex-grow: 1과 flex-grow: 2를 가지고 있다면, 두 번째 아이템은 첫 번째 아이템보다 두 배 더 많은 공간을 차지한다.

실제 예시

아래 이미지 예시를 참고하자.

텅 빈 거실(800px)에 세 개의 가구(각각 100px 크기)를 서로 붙여서 배치했다.
가구 배치가 끝나고 나니 거실에 500px의 여유 공간이 남았다.
남은 500px에 가구 A, B, C가 차지하는 공간을 각각 0.5, 2, 1.5 비중으로 분배했다.

그렇다면 각 가구는 남아있는 500px의 공간을 각각 0.5, 2, 1.5만큼 추가로 나누어 가진 것이다.

즉 나누어 가지는 총 너비가 500px이라면 500을 각 가구가 나누어 가진 전체 비중 0.5 + 2 + 1.5 = 4로 나눈 것을 각 비중에 따라 곱해준 것이 실제 늘어난 값이다.

500/4 = 125이며 각각 0.5, 2, 1.5만큼 나누어 가졌기 때문에 실제 나누어 가진 값은 62.5, 250, 187.5 만큼이다.

즉 아래와 같은 계산 과정을 거친다.

1. 초기 상태

컨테이너 너비: 800px
상자 3개 각각의 초기 너비: 100px
상자 3개의 총 초기 너비: 300px
남은 공간: 800px - 300px = 500px

2. flex-grow 비율 계산

flex-grow 값의 합: 0.5 + 2 + 1.5 = 4
각 상자의 flex-grow 비율:
- 상자 1: 0.5 / 4 = 0.125
- 상자 2: 2 / 4 = 0.5
- 상자 3: 1.5 / 4 = 0.375

3. 남은 공간 분배:

각 상자가 가져갈 추가 공간
- 상자 1 : 500px * 0.125 = 62.5px
- 상자 2 : 500px * 0.5 = 250px
- 상자 3 : 500px * 0.375 = 187.5px

4. 최종 크기:

각 상자의 최종 너비:
- 상자 1: 100px + 62.5px = 162.5px
- 상자 2: 100px + 250px = 350px
- 상자 3: 100px + 187.5px = 287.5px

위의 이미지는 아래 코드로 구현했다. (최적화를 못하고 CSS만 사용해서 좀 누더기 같다...)

CSS

.container1 {width: 1200px;
  height: 1000px;
  border: 2px solid black;
  flex-wrap: wrap;
  background-color: #fffeed;
  }
  
  .container2 {width: 1200px;
    height: fit-content;
    font-size: 50px;
    margin-bottom: 10px;
    font-weight: bold;
    }

    .container1, .container2{
      align-content: flex-start;
      justify-content: center;
      flex-direction: row;
      display: flex;
    }

    .box1, .box2, .box3{
      width: 100px;
      height: 100px;
    }

    .box1, .box2, .box3 {color: white;
      font-size: 20px;
      display: flex;
      border: 2px solid black;
      margin: 2px;  
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .box21, .box22, .box23{
      width: 100px;
      height: 100px;
    }


.box21, .box22, .box23{color: white;
  font-size: 20px;
  display: flex;
  border: 2px solid black;
  margin: 2px;  
  align-items: center;
  justify-content: center;
  flex-direction: column;}

.box4{
  font-size: 20px;
  display: flex;
align-items: center;
justify-content:space-evenly;
font-weight: bold;
}

.box5{
border:black 2px solid;
margin-left: 10px;
  margin-right: 10px;

}
.box6{
  border: 0;
}
.fc-b{color: blue;}

  


    .box1, .box21 {background-color: #5a80ff;}
    .box2, .box22 {background-color: #006e09;}
    .box3, .box23 {background-color: #ffbc02;}
    .box4 {background-color: white;}
    .box4{ flex-grow: 1; }
    .box5{ flex-grow: 1; }


    


    
.rad01{
  margin-top: 0px;
  height: 20px;
  margin-top: -80px;
  width: 800px;
  border-bottom : 4px solid black;
  border-radius: 0 0 50px 50px;
  position: absolute;
}

.rad011{
  margin-top: 0px;
  height: 20px;
  margin-top: 800px;
  width: 800px;
  border-bottom : 4px solid black;
  border-radius: 0 0 50px 50px;
  position: absolute;
}

.rad02{
  margin-top: 0px;
  height: 10px;
  margin-top: 110px;
  width: 100px;
  border-bottom : 4px solid black;
  border-radius: 0 0 50px 50px;
  position: absolute;
}
.rad03{
  margin-top: 0px;
  height: 10px;
  margin-top: 110px;
  width: 200px;
  border-bottom : 4px solid black;
  border-radius: 0 0 50px 50px;
  position: absolute;
}




.label2{margin-top: 0px;
  background-color: #fffeed;
  text-align: center;
  width: 150px;
  z-index: 1;
}

.label3, .label4{margin-top: 0px;
  background-color: #ffffff;
  text-align: center;
  width: 50px;
  z-index: 1;
}

.label3, .label4 {font-size: 16px;
  font-weight: bold;
}

.label4{  position: absolute;
  
width: 12%;
}

    .label, .label2{
      font-size: 35px;
      font-weight: bold;
    }
  
  .m1{width: fit-content;
    height:fit-content;
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    flex-wrap: wrap;
    }
  
    .mbox1, .mbox2{
      width: 800px;
      height: 300px;
      margin-top: 10px;
      justify-content: flex-start;
      display: flex;
      background-color: white;
      border: 4px solid orange;
      padding: 2px;
      position: relative;
      margin-bottom: 0px;
    }

    .mbox3{
width: 108px;
display: flex;
align-content:flex-start;
flex-wrap: wrap;
justify-content: center;
    }

    .mbox4{
    width: 100%;
    display: flex;
    align-content:flex-start;
    flex-wrap: wrap;
    justify-content: flex-start;

        }


.mbox31, .mbox32, .mbox33{
          width: 108px;
          display: flex;
          align-content:flex-start;
          flex-wrap: wrap;
          justify-content: center;

              }

.mbox41{
width: 100%;
display: flex;
align-content:flex-start;
flex-wrap: wrap;
justify-content:flex-start;
    }
.mbox31{ flex-grow: 0.5;}
.mbox32{ flex-grow: 3;}
.mbox33{ flex-grow: 1.5;}

.box21{ flex-grow: 1;}
.box22{ flex-grow: 1;}
.box23{ flex-grow: 1;}
.lbox{width: 100%;
  display: flex;
  justify-content: center;

}

.rad04{
  margin-top: 0px;
  height: 10px;
  width: 90%;
  border-bottom : 4px solid black;
  border-radius: 0 0 50px 50px;

}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container2">flex-grow</div>
  <div class="container1">
    <div class="m1">
      <div class="label">flex-grow (X) </div> 
        <div class="mbox1">
          <div class="mbox4">
          <div class="mbox3">
            <div class="box1">A</div>
            <div class="label3">100px</div>
            <div class="rad02" ></div>  
          </div>
        
        
          <div>
            <div class="mbox3">
              <div class="box2">B</div>
              <div class="label3">100px</div>
              <div class="rad02" ></div>  
            </div>
        
        
          </div>
          <div>
        <div class="mbox3">
          <div class="box3">C</div>
          <div class="label3">100px</div>
          <div class="rad02" ></div>  
       </div>
       
    </div>
    <div class="box4">
      <div class="box5"></div>
      <div class="box6">500px</div>
      <div class="box5"></div>
    
    </div>
    
    </div>
      </div>
      <div class="label2">800px</div>
      <div class="rad01" ></div>


    <!-- 2번째 -->
      <div class="m1">
          <div class="label">flex-grow (O)</div> 
            <div class="mbox1">
                  <div class="mbox41">
                          <div class="mbox31">
                            <div class="box21">A</div>
                            <div class="lbox">
                            <div class="label4">162.5px(0.5)<br><span class="fc-b">+62.5px</span></div>
                            <div class="rad04" ></div>  
                            
                          </div>
                            
                          </div>
            
            
                  
                            <div class="mbox32">
                              <div class="box22">B</div>
                              <div class="lbox">
                                <div class="rad04" ></div>  
                                <div class="label4">350px(2)<br><span class="fc-b">+250px</span></div>
                            </div>
                              
                            </div>
                        <div class="mbox33">
                          <div class="box23">C</div>
                          <div class="lbox">
                            <div class="rad04" ></div>  
                            <div class="label4">287.5px(1.5)<br><span class="fc-b">+187.5px</span></div></div>
                          
                        </div>
                    </div>
                </div>
            </div>
            <div class="label2">800px</div>
            <div class="rad011" ></div>
       </div>
       
      </div>
  
  </div> <!-- container1 끝 -->
</body>
    </html>

'프로그래밍 > css 심화' 카테고리의 다른 글

CSS 심화 공부(10) - flex item 속성(4) : flex basis (0)	2025.03.13
CSS 심화 공부(9) - flex item 속성(3) : flex shrink (0)	2025.03.13
CSS 심화 공부(7) - flex item 속성(1) : flex item order (0)	2025.03.12
CSS 심화 공부(6) - 플렉스 컨테이너의 속성(2) 정렬 방식 : justify-content, align-items, align-content (0)	2025.03.12
CSS 심화 공부(5) - 플렉스 컨테이너의 속성(1) 레이아웃 방식 : display, direction, wrap, flow (0)	2025.03.12

현재글CSS 심화 공부(8) - flex item 속성(2) : flex grow

작은기린우리

lamarck009 님의 블로그 입니다.

구조, javascript, 제트인덱스, CSS, boxsizing, 요소, 선택자, 자바 스크립트, flex, Grid, flex item order, 자바스크립트, 투명도, 태그, html, js, 텍스트, 속성, Java script, 프로그래밍,

Today :
Yesterday :

작은기린우리