flex-basis
Sets the initial size of a flex item. Similar to width but only works in flex layouts, serving as the base size before flex-grow and flex-shrink are applied.
Class Patterns
Specify values using the fb{value} format.
Caution: Dual usage of fb prefix
The fb prefix is used for both flex-basis and filter: blur(). fba, fb50p are flex-basis, while fb5px with only px units may be filter: blur, so distinguish by context.
| Class | CSS | Description |
|---|---|---|
fba | flex-basis: auto | Based on content or width/height (default) |
fb0p | flex-basis: 0% | Initial size 0. Equal distribution when combined with fg1 |
fb20rem | flex-basis: 20rem | Initial size 200px |
fb30rem | flex-basis: 30rem | Initial size 300px |
fb25p | flex-basis: 25% | parent width 25% |
fb50p | flex-basis: 50% | parent width 50% |
fb100p | flex-basis: 100% | 100% of parent width (full row) |
Visual Comparison
Compares how the initial size of items differs based on flex-basis values.
fba -- Based on content size
Each item width is determined by content size
fb20rem -- Fixed initial size (200px)
Same initial width regardless of content length
fb50p -- 50% of parent
Takes 50% of parent width as initial size
flex-basis vs width
Inside a flex container, flex-basis takes priority over width.
| flex-basis | width | |
|---|---|---|
| Inside flex container | Takes priority over width | Fallback when flex-basis is absent |
| Outside flex container | Ignored | Works normally |
| flex-direction: column | Acts as height | Acts as width (separate) |
| When value is auto | References width/height value | Content or specified value |
Class Details
fbaflex-basis: auto
Determines initial size based on content size or width/height value. The default value of flex-basis, providing the most natural behavior.
<!-- Natural size distribution -->
<div class="df gap8px">
<div class="fba fg1 bg6366F1 cFFFFFF p16px br4px">Short</div>
<div class="fba fg1 bg34D399 c000000 p16px br4px">Slightly longer content</div>
<div class="fba fg1 bgF59E0B c000000 p16px br4px">Area with very long content</div>
</div>
<!-- Space is distributed based on content size ratio -->fb{N}{unit}flex-basis: {value}
Sets a fixed initial size. Supports rem and % units. Actual size may change due to flex-grow/shrink.
<!-- Fixed initial width card -->
<div class="df fww gap16px">
<div class="fb30rem fg0 fs0 bg18181B p2rem br8px">
Initial width 300px (fixed)
</div>
<div class="fb30rem fg0 fs0 bg18181B p2rem br8px">
Initial width 300px (fixed)
</div>
</div>
<!-- Percent-based layout -->
<div class="df gap16px">
<aside class="fb25p fs0 bg18181B p2rem br8px">25% Sidebar</aside>
<main class="fg1 bg27272A p2rem br8px">Remaining main</main>
</div>fb0pflex-basis: 0%
Sets initial size to 0. When combined with fg1, ignores content size for completely equal distribution.
<!-- Completely equal distribution -->
<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>
<!-- Exactly equal width regardless of content length -->
<!-- Comparison with fba -->
<div class="df gap8px mt16px">
<div class="fba fg1 bg6366F1 cFFFFFF p16px br4px">Short</div>
<div class="fba fg1 bg34D399 c000000 p16px br4px">Very very long text content</div>
</div>
<!-- fba + fg1 distributes space by content size ratio (unequal) -->Tips & Notes
Use fb0p + fg1 for equal distribution
fba fg1 results in slightly different widths based on content size. For exactly equal widths, use fb0p fg1.
Using the flex shorthand property
To set grow, shrink, and basis together, shorthand classes like fa(flex: auto = 1 1 auto) or flex1-0-0p are more concise.
Beware of fb prefix conflict
fb is used for both flex-basis and filter: blur. fba, fb50p are flex-basis; with only px units, it may vary by context, so verification is needed.