AAtomic CSS

flex-grow

플렉스 아이템이 남은 공간을 얼마나 차지할지 결정합니다. fg0은 기본값으로 공간을 차지하지 않고, fg1은 남은 공간을 모두 채웁니다.

클래스 목록

클래스CSS설명
fg0flex-grow: 0남은 공간을 차지하지 않음 (기본값)
fg1flex-grow: 1남은 공간을 모두 차지
fg2flex-grow: 2다른 아이템의 2배 비율로 공간 차지
fguflex-grow: unsetflex-grow 값을 초기화

시각적 비교

flex-grow 값에 따라 아이템이 남은 공간을 어떻게 채우는지 비교합니다.

모두 fg0 (기본값) — 남은 공간을 채우지 않음

Item 1Item 2Item 3

아이템이 콘텐츠 크기만큼만 차지하고, 오른쪽에 빈 공간이 남습니다

Item 2에 fg1 — 남은 공간을 모두 차지

Item 1Item 2 (fg1)Item 3

Item 2가 남은 공간을 전부 차지합니다

fg1 vs fg2 — 비율로 공간 배분

fg1 (1/3)fg2 (2/3)

fg1:fg2 = 1:2 비율로 남은 공간을 나눠 가집니다

고정 너비 사이드바 + 나머지 공간을 채우는 메인 콘텐츠 패턴입니다. fs0 w25rem로 사이드바 크기를 고정하고, fg1로 메인이 나머지를 채웁니다.

fs0 w25rem + fg1 조합

Sidebar (fs0 w25rem)
Main Content (fg1)
<!-- 사이드바 + 메인 콘텐츠 -->
<div class="df gap16px">
  <aside class="fs0 w25rem bg18181B p2rem br8px">
    사이드바 (고정 250px)
  </aside>
  <main class="fg1 bg27272A p2rem br8px">
    메인 콘텐츠 (나머지 공간 채움)
  </main>
</div>

<!-- 검색바 패턴 -->
<div class="df gap8px">
  <input class="fg1 py8px px16px bg18181B b1pxsolid27272A br4px" placeholder="검색어 입력" />
  <button class="fs0 py8px px16px bg6366F1 cFFFFFF br4px bn cp">검색</button>
</div>

클래스별 상세

fg0flex-grow: 0

기본값입니다. 아이템이 남은 공간을 차지하지 않고, 자신의 콘텐츠 크기(또는 지정된 width)만큼만 차지합니다.

<!-- 기본값: 콘텐츠 크기만큼만 차지 -->
<div class="df gap8px">
  <span class="fg0 bg18181B p12px br4px">고정</span>
  <span class="fg0 bg18181B p12px br4px">고정</span>
  <span class="fg0 bg18181B p12px br4px">고정</span>
</div>

<!-- 반응형에서 grow 해제 -->
<div class="fg1 sm-fg0">데스크탑에서만 공간 채움</div>

fg1flex-grow: 1

가장 많이 사용되는 값입니다. 남은 공간을 모두 차지하여 빈 공간 없이 채웁니다. 여러 아이템이 모두 fg1이면 동일한 비율로 나눠 가집니다.

<!-- 남은 공간 채우기 -->
<div class="df gap8px">
  <span class="bg18181B p12px br4px">고정</span>
  <span class="fg1 bg6366F1 cFFFFFF p12px br4px">나머지 전부 (fg1)</span>
</div>

<!-- 균등 분배 -->
<div class="df gap8px">
  <span class="fg1 bg18181B p12px br4px">1/3</span>
  <span class="fg1 bg18181B p12px br4px">1/3</span>
  <span class="fg1 bg18181B p12px br4px">1/3</span>
</div>

fg2flex-grow: 2

다른 아이템보다 2배 비율로 남은 공간을 차지합니다. fg1과 함께 사용하면 1:2 비율로 공간이 배분됩니다.

<!-- 1:2 비율 배분 -->
<div class="df gap8px">
  <div class="fg1 bg18181B p12px br4px">fg1 (1/3)</div>
  <div class="fg2 bg6366F1 cFFFFFF p12px br4px">fg2 (2/3)</div>
</div>

<!-- 1:2:1 비율 -->
<div class="df gap8px">
  <div class="fg1 bg18181B p12px br4px">fg1</div>
  <div class="fg2 bg6366F1 cFFFFFF p12px br4px">fg2</div>
  <div class="fg1 bg18181B p12px br4px">fg1</div>
</div>

fguflex-grow: unset

flex-grow 값을 초기화합니다. 부모나 다른 규칙에서 설정된 flex-grow를 제거할 때, 또는 반응형에서 특정 브레이크포인트에서만 grow를 해제할 때 사용합니다.

<!-- 반응형에서 grow 초기화 -->
<div class="df gap8px">
  <span class="fg1 md-fgu bg18181B p12px br4px">
    데스크탑: 공간 채움 / 태블릿: 초기화
  </span>
</div>

팁 & 주의사항

fg1이 가장 많이 쓰입니다

대부분의 경우 fg1만으로 충분합니다. "남은 공간을 채워라"는 의미로 사이드바 레이아웃, 검색바, 네비게이션 등에서 활용됩니다.

fg0은 기본값이므로 보통 생략

flex-grow의 기본값이 0이므로, 명시적으로 fg0을 쓸 일은 거의 없습니다. 반응형에서 grow를 해제할 때 사용합니다.

숫자가 클수록 더 많은 공간

fg1:fg2 = 1:2 비율, fg1:fg3 = 1:3 비율로 남은 공간을 나눕니다. 하지만 실무에서는 fg1과 fg2 정도면 충분합니다.

fs0 + fg1 조합을 기억하세요

고정 요소는 fs0(flex-shrink: 0)로 줄어들지 않게 하고, 유동 요소는 fg1로 나머지를 채우는 것이 가장 흔한 패턴입니다.

flex-shrinkflex-basisflexwidthdisplay