AAtomic CSS

flex-shrink

공간이 부족할 때 플렉스 아이템이 얼마나 줄어들지 결정합니다. fs0은 줄어들지 않게 고정하고, fs1은 기본값으로 필요 시 줄어듭니다.

fs + 단위 없음 = flex-shrink, fs + 단위 있음 = font-size

fs0 = flex-shrink: 0, fs1 = flex-shrink: 1 이지만, fs16px = font-size: 16px 입니다. 단위 유무로 속성이 결정됩니다!

클래스 목록

클래스CSS설명
fs0flex-shrink: 0줄어들지 않음. 크기 고정
fs1flex-shrink: 1기본값. 공간 부족 시 줄어듦
fshiflex-shrink: initial초기값(1)으로 되돌림
fshuflex-shrink: unset값 해제 (상속/기본값으로)

fs 구분: flex-shrink vs font-size

Atomic CSS에서 fs 프리픽스는 단위 유무에 따라 완전히 다른 속성을 나타냅니다.

클래스속성CSS 출력
fs0flex-shrinkflex-shrink: 0
fs1flex-shrinkflex-shrink: 1
fs14pxfont-sizefont-size: 14px
fs16pxfont-sizefont-size: 16px
fs1-4remfont-sizefont-size: 1.4rem
fs2remfont-sizefont-size: 2rem

시각적 비교

컨테이너 공간이 부족할 때 flex-shrink 값에 따른 차이를 비교합니다.

모두 fs1 (기본값) — 공간 부족 시 균등하게 줄어듦

Wide Item 1Wide Item 2Wide Item 3

세 아이템 모두 줄어들어 컨테이너에 맞춰집니다

Item 1에 fs0 — 줄어들지 않고 크기 유지

Fixed (fs0)ShrinksShrinks

fs0 아이템은 원래 크기를 유지하고, 나머지가 더 많이 줄어듭니다

실전 패턴: 고정 사이드바

fs0 w25rem으로 사이드바가 절대 줄어들지 않게 고정하고, 메인 콘텐츠만 유동적으로 변합니다.

fs0 w25rem + fg1 조합

Sidebar (fs0 w25rem)
Main Content (fg1)
<!-- 고정 사이드바 + 유동 메인 -->
<div class="df gap16px">
  <aside class="fs0 w25rem bg18181B p2rem br8px">
    사이드바 (절대 줄어들지 않음)
  </aside>
  <main class="fg1 bg27272A p2rem br8px">
    메인 콘텐츠 (남은 공간 채움)
  </main>
</div>

<!-- 아이콘 + 텍스트 (아이콘 크기 고정) -->
<div class="df aic gap8px">
  <img class="fs0 w4rem h4rem br4px" src="avatar.png" />
  <span class="fg1">긴 텍스트가 들어와도 아이콘은 줄어들지 않습니다</span>
</div>

클래스별 상세

fs0flex-shrink: 0

아이템이 절대 줄어들지 않습니다. 지정된 width나 콘텐츠 크기를 보장해야 할 때 사용합니다. 가장 많이 사용되는 flex-shrink 클래스입니다.

<!-- 이미지/아이콘 크기 보장 -->
<div class="df aic gap12px">
  <img class="fs0 w4-8rem h4-8rem br8px" src="avatar.png" />
  <div class="fg1 minw0">
    <p class="fw600">사용자 이름</p>
    <p class="c71717A toe oh wsn">아주 긴 상태 메시지가 들어가도 아바타는 찌그러지지 않습니다</p>
  </div>
</div>

<!-- 고정 버튼 -->
<div class="df gap8px">
  <input class="fg1 py8px px16px bg18181B b1pxsolid27272A br4px" placeholder="입력..." />
  <button class="fs0 py8px px2rem bg6366F1 cFFFFFF br4px bn cp">전송</button>
</div>

fs1flex-shrink: 1

기본값입니다. 공간이 부족하면 다른 아이템과 균등하게 줄어듭니다. 일반적으로 명시할 필요가 없지만, fs0을 되돌릴 때 사용합니다.

<!-- 기본값 (보통 생략) -->
<div class="df gap8px">
  <span class="fs1 bg18181B p12px br4px">줄어들 수 있음</span>
  <span class="fs1 bg18181B p12px br4px">줄어들 수 있음</span>
</div>

<!-- 반응형에서 fs0 → fs1 전환 -->
<aside class="fs0 sm-fs1 w25rem">
  데스크탑: 고정 / 모바일: 줄어들 수 있음
</aside>

fshiflex-shrink: initial

flex-shrink를 초기값(1)으로 되돌립니다. 부모에서 설정된 shrink 값을 리셋할 때 사용합니다.

<!-- initial로 되돌리기 -->
<div class="df gap8px">
  <span class="fs0 md-fshi bg18181B p12px br4px">
    데스크탑: 고정 / 태블릿: initial (=1)
  </span>
</div>

fshuflex-shrink: unset

flex-shrink 값을 완전히 해제합니다. 상속 또는 기본값으로 되돌아갑니다.

<!-- unset으로 해제 -->
<div class="df gap8px">
  <span class="fs0 md-fshu bg18181B p12px br4px">
    데스크탑: 고정 / 태블릿: unset
  </span>
</div>

팁 & 주의사항

fs0 vs fs16px 혼동 주의!

fs0, fs1은 flex-shrink이고, fs16px, fs1-4rem은 font-size입니다. 단위가 있으면 font-size, 없으면 flex-shrink입니다.

fs0은 "줄어들지 마" 의미

이미지, 아이콘, 사이드바 등 크기가 보장되어야 하는 요소에 fs0을 사용하세요. 없으면 공간 부족 시 찌그러질 수 있습니다.

가장 흔한 패턴: fs0 + 고정 width

fs0 w25rem은 "250px 고정, 줄어들지 않음"입니다. 사이드바, 로고, 아바타 등에 필수적인 조합입니다.

min-width: 0 이슈

flex 아이템의 기본 min-width는 auto입니다. 텍스트가 길어 overflow가 발생하면 minw0을 추가해 shrink가 정상 동작하게 하세요.

flex-growflex-basisflexmin-widthdisplay