flex
flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 단축 속성입니다. 플렉스 아이템이 남은 공간을 어떻게 분배하고 줄어들지를 제어합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
fa | flex: auto (1 1 auto) | 늘어나고 줄어듦. 콘텐츠 기준으로 남은 공간 채움 |
fi | flex: initial (0 1 auto) | 늘어나지 않고 줄어들기만 함. flex 기본값 |
flex1-1-auto | flex: 1 1 auto | fa와 동일. 명시적 표기 |
flex0-0-auto | flex: 0 0 auto | 늘어나지도 줄어들지도 않음. 고정 크기 |
flex1-0-0p | flex: 1 0 0% | 콘텐츠 무시하고 균등 분배 |
시각적 비교
fa와 fi가 남은 공간을 어떻게 처리하는지 비교합니다.
flex: auto (fa) — 남은 공간을 채움
fa는 콘텐츠 크기를 기준으로 남은 공간을 늘어나서 채웁니다
flex: initial (fi) — 줄어들 수만 있음
fi는 콘텐츠 크기 그대로이며, 공간이 부족하면 줄어듭니다
flex: 1 1 auto (flex1-1-auto) — 균등 분배
모든 아이템이 동일 비율로 공간을 분배합니다
fa vs fi 비교
| fa (flex: auto) | fi (flex: initial) | |
|---|---|---|
| CSS 값 | 1 1 auto | 0 1 auto |
| flex-grow | 1 (늘어남) | 0 (늘어나지 않음) |
| flex-shrink | 1 (줄어듦) | 1 (줄어듦) |
| flex-basis | auto (콘텐츠 기준) | auto (콘텐츠 기준) |
| 남은 공간 | 분배받음 | 분배받지 않음 |
| 주요 용도 | 남은 공간 채우기 | 콘텐츠 크기 유지 (기본값 리셋) |
클래스별 상세
faflex: auto
flex: 1 1 auto와 동일합니다. 콘텐츠 크기를 기반으로 하되 남은 공간도 채웁니다. 사이드바 옆 메인 콘텐츠, 검색바 등에 적합합니다.
<!-- 사이드바 + 메인 (flex 레이아웃) -->
<div class="df gap2rem">
<aside class="fs0 w25rem">사이드바 (고정 너비)</aside>
<main class="fa">메인 콘텐츠 (나머지 공간 채움)</main>
</div>
<!-- 검색바 -->
<div class="df gap8px aic">
<input class="fa py8px px16px br4px" placeholder="검색어 입력" />
<button class="py8px px16px bg6366F1 cFFFFFF br4px bn cp wsn">검색</button>
</div>
<!-- 헤더: 로고 + 메뉴 + 버튼 -->
<header class="df aic gap2rem">
<div class="wsn">Logo</div>
<nav class="fa df jcc gap2rem">메뉴</nav>
<button class="wsn">로그인</button>
</header>fiflex: initial
flex: 0 1 auto와 동일합니다. 콘텐츠 크기를 유지하며 공간이 부족할 때만 줄어듭니다. flex의 기본값이므로 명시적으로 리셋할 때 사용합니다.
<!-- fa를 리셋할 때 -->
<div class="df gap8px">
<div class="fa">늘어나는 영역</div>
<div class="fi">콘텐츠 크기 유지</div>
</div>
<!-- 반응형: 데스크탑에서는 늘어나고 모바일에서는 콘텐츠 크기 -->
<div class="df fww gap16px">
<div class="fa sm-fi">반응형 아이템</div>
</div>flex{grow}-{shrink}-{basis}flex: {grow} {shrink} {basis}
flex 단축 속성에 세 값을 직접 지정합니다. 예: flex1-1-auto, flex0-0-auto, flex1-0-0p 등.
<!-- 균등 분배 (basis: 0) -->
<div class="df gap8px">
<div class="flex1-0-0p bg6366F1 cFFFFFF p16px br4px tac">1/3</div>
<div class="flex1-0-0p bg34D399 c000000 p16px br4px tac">1/3</div>
<div class="flex1-0-0p bgF59E0B c000000 p16px br4px tac">1/3</div>
</div>
<!-- 고정 크기 아이템 (grow: 0, shrink: 0) -->
<div class="df gap8px">
<div class="flex0-0-auto bg6366F1 cFFFFFF py8px px16px br4px">고정</div>
<div class="fa bg27272A cFFFFFF py8px px16px br4px">나머지 채움</div>
</div>팁 & 주의사항
fa는 남은 공간 채우기에 최적
고정 너비 사이드바 옆에 fa를 쓰면 나머지 공간을 자동으로 채웁니다. fg1과 비슷하지만 basis가 auto여서 콘텐츠 크기를 존중합니다.
개별 속성도 사용 가능
세밀한 제어가 필요하면 fg1(flex-grow), fs0(flex-shrink), fbauto(flex-basis)를 개별적으로 사용할 수 있습니다.
flex 컨테이너 안에서만 동작
flex 단축 속성은 부모가 df(display: flex) 또는 dif(display: inline-flex)인 경우에만 동작합니다.