flex
A shorthand property that sets flex-grow, flex-shrink, and flex-basis at once. Controls how flex items distribute remaining space and shrink.
Class List
| Class | CSS | Description |
|---|---|---|
fa | flex: auto (1 1 auto) | Grows and shrinks. Fills remaining space based on content |
fi | flex: initial (0 1 auto) | Does not grow, only shrinks. Flex default |
flex1-1-auto | flex: 1 1 auto | Same as fa. Explicit notation |
flex0-0-auto | flex: 0 0 auto | Neither grows nor shrinks. Fixed size |
flex1-0-0p | flex: 1 0 0% | Ignores content and distributes equally |
Visual Comparison
Compares how fa and fi handle remaining space.
flex: auto (fa) -- Fills remaining space
fa grows to fill remaining space based on content size
flex: initial (fi) -- Can only shrink
fi keeps content size as-is, shrinks only when space is insufficient
flex: 1 1 auto (flex1-1-auto) -- Equal distribution
All items distribute space equally
fa vs fi Comparison
| fa (flex: auto) | fi (flex: initial) | |
|---|---|---|
| CSS value | 1 1 auto | 0 1 auto |
| flex-grow | 1 (늘어남) | 0 (늘어나지 않음) |
| flex-shrink | 1 (줄어듦) | 1 (줄어듦) |
| flex-basis | auto (콘텐츠 기준) | auto (콘텐츠 기준) |
| Remaining space | 분배받음 | 분배받지 않음 |
| Common Use Cases | Fill remaining space | 콘텐츠 크기 유지 (기본값 리셋) |
Class Details
faflex: auto
Equivalent to flex: 1 1 auto. Based on content size while also filling remaining space. Suitable for main content next to a sidebar, search bars, etc.
<!-- 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
Equivalent to flex: 0 1 auto. Maintains content size and only shrinks when space is insufficient. Used to explicitly reset since it is the default value of 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}
Directly specifies three values for the flex shorthand property. Examples: flex1-1-auto, flex0-0-auto, flex1-0-0p, etc.
<!-- 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>Tips & Notes
fa is ideal for filling remaining space
Using fa next to a fixed-width sidebar automatically fills the remaining space. Similar to fg1 but respects content size since basis is auto.
Individual properties can also be used
For fine-grained control, you can use fg1(flex-grow), fs0(flex-shrink), fbauto(flex-basis) individually.
Only works inside a flex container
The flex shorthand property only works when the parent is df(display: flex) or dif(display: inline-flex).