본문 바로가기
CSS

[CSS] flex-shrink, flex-grow 알아보기 -2

by 맨날개발 2025. 7. 12.

🔗 이전 내용

flex-basis 알아보기 - 1

 

 

📢 들어가며

flex-shrink와 flex-grow는 flex-basis와 더둘어 플렉스 컨테이너의 아이템의 사이즈를 결정한다. flex-basis로 기본 크기를 설정하고 flex-grow와 flex-shrink를 통해 남거나 모자라는 공간을 비율대로 조정한다.

 

개별에 대한 속성을 지정하기도 하지만 flex 속성을 사용해서 단축 속성으로도 많이 사용된다.

.grow {
  flex-grow: 1;
}

.shrink {
  flex-shrink: 1;
}

.item {
  flex: 1 1 0;
}

 

 

🎠 flex-grow

flex-grow는 컨테이너 내에 잉여 공간이 발생했을 때, 각 아이템이 얼마만큼의 공간을 차지할지에 대한 비율을 설정한다.

 

기본 값은 0이고, 아이템들의 flex-grow의 총합이 0인 경우에는 잉여 공간은 그대로 남는다. 아래 이미지를 보면 빗금되어 있는 곳이 잉여 공간이다.

 

아래는 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .flex {
      display: flex;
      width: 100px;
      height: 100px;
    }

    p {
      background: rgb(255, 117, 117);
      margin: 0;
    }

    #p1 {
      flex-grow: 1;
      background-color: blue;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="flex">
    <p id="p1">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>
  </div>
</body>
</html>

 

 

위 코드에서 아이디가 p1인 요소에만 flex-grow를 1로 설정하였다. 나머지 두 요소에는 기본 값인 0으로 설정되어 있기 때문에 남은 잉여 공간은 p1이 전부 차지하게 된다.

 

아래 처럼 잉여공간을 1이 모두 차지했다.

 

 

아래는 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .flex {
      display: flex;
      width: 100px;
      height: 100px;
    }

    p {
      background: rgb(255, 117, 117);
      margin: 0;
    }

    #p1 {
      flex-grow: 1;
      background-color: blue;
      color: #fff;
    }

    #p2 {
      flex-grow: 2;
      background-color: orange;
      color: #fff;
    }

    #p3 {
      flex-grow: 1;
      background-color: pink;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="flex">
    <p id="p1">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>
  </div>
</body>
</html>

 

이번에는 p1과 p3에는 flex-grow의 값을 1로, p2에는 2로 설정하였다.

 

아래와 같이 잉여 공간이 비율대로 배분되었다.

 

✅ flex-grow는 비율로 너비를 나누는 것이 아니다.

p1에는 flex-grow를 1로, p2에는 2로 설정하였다.

 

컨테이너의 너비가 100px이고, flex-grow의 총합이 3이기 때문에 p1에는 33.33333px, p2에는 66.66666px로 설정될 것이라고 생각이 될 수 있다.

<style>
  div {
    width: 100px;
    display: flex;
  }

  #p1 {
    flex-grow: 1;
  }

  #p2 {
    flex-grow: 2;
  }
</style>
<div>
  <p id="p1">1</p>
  <p id="p2">2</p>
</div>

 

하지만 결과를 확인해보면 36.293px을 차지하는 것을 확인할 수 있다.

 

flex-grow에 의해서 사이즈가 배분되는 순서는 다음과 같다.

  1. 기본 크기 설정 : 각 아이템은 flex-basis(또는 width / height / 컨텐츠크기)에 의해 기본 크기를 할당한다.
  2. 잉여 공간을 비율로 배분 : 기본 크기 설정 완료 후, 컨테이너 내부에 잉여 공간이 존재하는 경우에 flex-grow 값에 따라 배분한다.

 

이 순서에 따라 계산해보면 다음과 같다.

 

1️⃣. 각 아이템은 아래 이미지 처럼 기본 크기가 8.892px로 할당되었다.

 

2️⃣. 컨테이너의 사이즈는 100px이고 각 아이템의 사이즈는 8.892px * 2이다. 남는 잉여 공간의 사이즈는 대략 82.216px이 나온다.

 

3️⃣. flex-grow가 각각 1, 2로 설정되어 있으니 82.216px을 3로 나눈 27.405px를 p1에 할당하고 남은 값을 p2에 할당하게 된다. 

 

위와 같은 순서로 진행했을 때 대략 비슷하게 사이즈가 할당되는 것을 확인할 수 있었다.

 

 

🎨 flex-shrink

flex-shrnk는 아이템들의 기본 사이즈의 총합이 컨테이너를 초과하는 경우, 초과하는 공간에 대해서 각 아이템이 얼마만큼의 사이즈를 줄일지를 결정하는 비율이다. 기본 값은 1이다.

 

아래는 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .flex {
      display: flex;
      width: 100px;
      height: 100px;
    }

    p {
      background: rgb(255, 117, 117);
      margin: 0;
      flex-basis: 40px;
    }

    #p1 {
      background-color: blue;
      color: #fff;
    }

    #p2 {
      background-color: orange;
      color: #fff;
    }

    #p3 {
      background-color: pink;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="flex">
    <p id="p1">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>
  </div>
</body>
</html>

위의 코드에서 아이템들의 기본 사이즈는 40px이다. 컨테이너의 사이즈가 100px이기 때문에 초과 공간이 발생한다.

현재는 따로 flex-shrink를 설정하지 않았기 때문에 기본 값이 1이라서 초과 공간에 대해서 동일한 비율로 줄어들게 된다.

 

모든 아이템들이 기본 크기와 flex-shrink가 동일하기 때문에 최종 결과에서는 동일한 크기가 되었다.

 

 

✅ flex-shrink는 비율로 사이즈를 나누는 것이 아니다.

flex-grow와 마찬가지로 초과 공간이 발생했을 때 컨테이너의 사이즈를 나누는 비율을 설정하는 것이 아니다. 

 

flex-shrink에 의해서 사이즈가 배분되는 순서는 다음과 같다.

  1. 기본 크기 설정 : 각 아이템은 flex-basis(또는 width / height / 컨텐츠크기)에 의해 기본 크기를 할당한다.
  2. 초과 공간을 비율만큼 줄이기 : 기본 크기 설정 완료 후, 컨테이너를 초과하는 공간이 발생하는 경우에 flex-shrink 값에 따라 초과 공간을 줄인다.

 

예제를 통해서 한번 알아보자.

 

아래는 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .flex {
      display: flex;
      width: 100px;
      height: 100px;
    }

    p {
      background: rgb(255, 117, 117);
      margin: 0;
      flex-basis: 40px;
    }

    #p1 {
      background-color: blue;
      color: #fff;
      flex-shrink: 1;
    }

    #p2 {
      background-color: orange;
      color: #fff;
      flex-shrink: 2;
    }

    #p3 {
      background-color: pink;
      color: #fff;
      flex-shrink: 1;
    }
  </style>
</head>
<body>
  <div class="flex">
    <p id="p1">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>
  </div>
</body>
</html>

 

위에서 설명한 순서에 따라 계산해보면 다음과 같다.

 

1️⃣. 컨테이너의 너비는 100px이고, 아이템의 총 사이즈의 합은 120px(flex-basis가 40px이기 때문)이다. 초과 공간은 20px이다.

 

2️⃣. p1, p3은 flex-shrink가 1이고 p2는 2로 설정되어 있다. 전체 합산하면 4이고 초과 공간 20px이기 때문에 1마다 5px 만큼 줄여야 한다.

 

3️⃣. p1과 p3의 사이즈는 40px이고, flex-shrink가 1이기 때문에 35px이 된다. p2의 사이즈는 40px이고, flex-shrink가 2이기 때문에 30px이 된다.

 

 

✅ flex-shrink값이 0인 경우 줄어들지 않는다.

flex-shrink 값이 0으로 설정하면 초과 공간이 발생하더라도 줄어들지 않는다. 이로인해 컨테이너의 사이즈를 초과할 수 있다.

 

아래는 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .flex {
      display: flex;
      width: 100px;
      height: 100px;
    }

    p {
      background: rgb(255, 117, 117);
      margin: 0;
      flex-basis: 40px;
      flex-shrink: 0;
    }

    #p1 {
      background-color: blue;
      color: #fff;
    }

    #p2 {
      background-color: orange;
      color: #fff;
    }

    #p3 {
      background-color: pink;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="flex">
    <p id="p1">1</p>
    <p id="p2">2</p>
    <p id="p3">3</p>
  </div>
</body>
</html>

위 코드에서 컨테이너보다 아이템 전체의 사이즈가 크다. 그래서 초과 공간이 발생했지만, flex-shrink 값이 0이기 때문에 줄어들지 않게된다.

 

 

🙄 정리

  • flex-grow는 컨테이너의 잉여 공간에 대해서 아이템들이 나눠갖는 사이즈의 비율
  • flex-shrink는 컨테이너를 초과하는 공간에 대해서 아이템들이 사이즈를 줄이는 비율
  • 기본 사이즈에는 패딩과 마진까지 포함하는 것에 주의
  • 위 두 속성은 메인 축에 대해서만 계산

'CSS' 카테고리의 다른 글

[CSS] flex-basis, flex-shrink, flex-grow 활용 -2  (0) 2025.07.16
[CSS] flex-basis 알아보기 -1  (0) 2025.07.11

관련글

티스토리툴바