flex
flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 단축 속성입니다. 플렉스 아이템이 남은 공간을 어떻게 분배하고 줄어들지를 제어합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | 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 (콘텐츠 기준) |
| 남은 공간 | 분배받음 | 분배받지 않음 |
| 주요 용도 | Fill remaining space | 콘텐츠 크기 유지 (기본값 리셋) |
클래스별 상세
faflex: auto
flex: 1 1 auto와 동일합니다. 콘텐츠 크기를 기반으로 하되 남은 공간도 채웁니다. 사이드바 옆 메인 콘텐츠, 검색바 등에 적합합니다.
<!-- Sidebar + main (flex layout) -->
<div class="df gap2rem">
<aside class="fs0 w25rem">Sidebar (Fixed Width)</aside>
<main class="fa">Main content (fills remaining space)</main>
</div>
<!-- Search bar -->
<div class="df gap8px aic">
<input class="fa py8px px16px br4px" placeholder="Enter search term" />
<button class="py8px px16px bg6366F1 cFFFFFF br4px bn cp wsn">Search</button>
</div>
<!-- Header: Logo + Menu + Button -->
<header class="df aic gap2rem">
<div class="wsn">Logo</div>
<nav class="fa df jcc gap2rem">Menu</nav>
<button class="wsn">Login</button>
</header>fiflex: initial
flex: 0 1 auto와 동일합니다. 콘텐츠 크기를 유지하며 공간이 부족할 때만 줄어듭니다. flex의 기본값이므로 명시적으로 리셋할 때 사용합니다.
<!-- When resetting fa -->
<div class="df gap8px">
<div class="fa">Growing area</div>
<div class="fi">Maintains content size</div>
</div>
<!-- Responsive: Grows on desktop, content size on mobile -->
<div class="df fww gap16px">
<div class="fa sm-fi">Responsive item</div>
</div>flex{grow}-{shrink}-{basis}flex: {grow} {shrink} {basis}
flex 단축 속성에 세 값을 직접 지정합니다. 예: flex1-1-auto, flex0-0-auto, flex1-0-0p 등.
<!-- Equal distribution (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>
<!-- Fixed size item (grow: 0, shrink: 0) -->
<div class="df gap8px">
<div class="flex0-0-auto bg6366F1 cFFFFFF py8px px16px br4px">Fixed</div>
<div class="fa bg27272A cFFFFFF py8px px16px br4px">Fill remaining</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)인 경우에만 동작합니다.