AAtomic CSS

flex-grow

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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)
<!-- Sidebar + Main Content -->
<div class="df gap16px">
  <aside class="fs0 w25rem bg18181B p2rem br8px">
    Sidebar (Fixed 250px)
  </aside>
  <main class="fg1 bg27272A p2rem br8px">
    Main content (fills remaining space)
  </main>
</div>

<!-- Search bar Pattern -->
<div class="df gap8px">
  <input class="fg1 py8px px16px bg18181B b1pxsolid27272A br4px" placeholder="Enter search term" />
  <button class="fs0 py8px px16px bg6366F1 cFFFFFF br4px bn cp">Search</button>
</div>

클래스별 상세

fg0flex-grow: 0

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

<!-- Default: takes up only content size -->
<div class="df gap8px">
  <span class="fg0 bg18181B p12px br4px">Fixed</span>
  <span class="fg0 bg18181B p12px br4px">Fixed</span>
  <span class="fg0 bg18181B p12px br4px">Fixed</span>
</div>

<!-- Disable grow in responsive -->
<div class="fg1 sm-fg0">Fills space on desktop only</div>

fg1flex-grow: 1

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

<!-- Fill remaining space -->
<div class="df gap8px">
  <span class="bg18181B p12px br4px">Fixed</span>
  <span class="fg1 bg6366F1 cFFFFFF p12px br4px">All remaining (fg1)</span>
</div>

<!-- Equal distribution -->
<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 ratio distribution -->
<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 ratio -->
<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를 해제할 때 사용합니다.

<!-- Reset grow in responsive -->
<div class="df gap8px">
  <span class="fg1 md-fgu bg18181B p12px br4px">
    Desktop: fill space / Tablet: reset
  </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