AAtomic CSS

flex-basis

플렉스 아이템의 초기 크기를 설정합니다. width와 비슷하지만 flex 레이아웃에서만 동작하며, flex-grow와 flex-shrink가 적용되기 전의 기준 크기입니다.

클래스 패턴

fb{value} 형태로 값을 지정합니다.

주의: fb 접두사의 이중 용도

fb 접두사는 flex-basis와 filter: blur() 두 가지로 사용됩니다. fbauto, fb50p는 flex-basis이고, fb5px처럼 px 단위만 있으면 filter: blur일 수 있으므로 문맥에 따라 구분합니다.

클래스CSS설명
fbautoflex-basis: auto콘텐츠 또는 width/height 기준 (기본값)
fb0pflex-basis: 0%초기 크기 0. fg1과 조합하면 균등 분배
fb20remflex-basis: 20rem초기 크기 200px
fb30remflex-basis: 30rem초기 크기 300px
fb25pflex-basis: 25%부모 너비의 25%
fb50pflex-basis: 50%부모 너비의 50%
fb100pflex-basis: 100%부모 너비의 100% (한 줄 전체)

시각적 비교

flex-basis 값에 따라 아이템의 초기 크기가 어떻게 달라지는지 비교합니다.

fbauto — 콘텐츠 크기 기준

짧은중간 길이 텍스트아주 긴 텍스트가 들어가면 더 넓어집니다

각 아이템이 콘텐츠 크기에 따라 너비가 결정됩니다

fb20rem — 고정 초기 크기 (200px)

ABC

콘텐츠 길이와 무관하게 동일한 초기 너비

fb50p — 부모의 50%

fb50p (50%)나머지

부모 너비의 50%를 초기 크기로 가집니다

flex-basis vs width

flex 컨테이너 안에서는 flex-basis가 width보다 우선합니다.

flex-basiswidth
flex 컨테이너 안width보다 우선flex-basis가 없을 때 fallback
flex 컨테이너 밖무시됨정상 동작
flex-direction: columnheight 역할width 역할 (별개)
auto 값일 때width/height 값 참조콘텐츠 또는 명시된 값

클래스별 상세

fbautoflex-basis: auto

콘텐츠 크기 또는 width/height 값을 기준으로 초기 크기를 결정합니다. flex-basis의 기본값이며, 가장 자연스러운 동작입니다.

<!-- 자연스러운 크기 분배 -->
<div class="df gap8px">
  <div class="fbauto fg1 bg6366F1 cFFFFFF p16px br4px">짧은</div>
  <div class="fbauto fg1 bg34D399 c000000 p16px br4px">좀 더 긴 콘텐츠</div>
  <div class="fbauto fg1 bgF59E0B c000000 p16px br4px">아주 긴 콘텐츠가 들어있는 영역</div>
</div>
<!-- 콘텐츠 크기 비율에 따라 공간이 분배됩니다 -->

fb{N}{unit}flex-basis: {value}

고정된 초기 크기를 설정합니다. rem, % 단위를 지원합니다. flex-grow/shrink에 의해 실제 크기는 변할 수 있습니다.

<!-- 고정 초기 너비 카드 -->
<div class="df fww gap16px">
  <div class="fb30rem fg0 fs0 bg18181B p2rem br8px">
    초기 너비 300px (고정)
  </div>
  <div class="fb30rem fg0 fs0 bg18181B p2rem br8px">
    초기 너비 300px (고정)
  </div>
</div>

<!-- 퍼센트 기반 레이아웃 -->
<div class="df gap16px">
  <aside class="fb25p fs0 bg18181B p2rem br8px">25% 사이드바</aside>
  <main class="fg1 bg27272A p2rem br8px">나머지 메인</main>
</div>

fb0pflex-basis: 0%

초기 크기를 0으로 설정합니다. fg1과 함께 사용하면 콘텐츠 크기를 무시하고 완전히 균등한 분배가 됩니다.

<!-- 완전 균등 분배 -->
<div class="df gap8px">
  <div class="fb0p fg1 bg6366F1 cFFFFFF p16px br4px tac">1/3</div>
  <div class="fb0p fg1 bg34D399 c000000 p16px br4px tac">1/3</div>
  <div class="fb0p fg1 bgF59E0B c000000 p16px br4px tac">1/3</div>
</div>
<!-- 콘텐츠 길이와 무관하게 정확히 동일한 너비 -->

<!-- fbauto와 비교 -->
<div class="df gap8px mt16px">
  <div class="fbauto fg1 bg6366F1 cFFFFFF p16px br4px">짧은</div>
  <div class="fbauto fg1 bg34D399 c000000 p16px br4px">아주아주 긴 텍스트 콘텐츠</div>
</div>
<!-- fbauto + fg1은 콘텐츠 크기 비율로 공간 분배 (불균등) -->

팁 & 주의사항

균등 분배에는 fb0p + fg1

fbauto fg1은 콘텐츠 크기에 따라 약간 다른 너비가 됩니다. 완전히 동일한 너비가 필요하면 fb0p fg1을 사용하세요.

flex 단축 속성 활용

grow, shrink, basis를 함께 설정하려면 fa(flex: auto = 1 1 auto)나 flex1-0-0p 등의 단축 클래스가 더 간결합니다.

fb 접두사 충돌 주의

fb는 flex-basis와 filter: blur 두 곳에서 사용됩니다. fbauto, fb50p는 flex-basis이고, px 단위만 있으면 문맥에 따라 달라질 수 있으니 확인이 필요합니다.

flex-growflex-shrinkflexwidthflex-direction