Flex Basis in CSS
From the CSS Flexbox cheat sheet · Flex Items · verified Jul 2026
Flex Basis
Set the initial main size of a flex item before free space is distributed
css
.item {
flex-basis: auto; /* use width/height */
flex-basis: 200px; /* specific size */
flex-basis: 50%; /* percentage */
flex-basis: 0; /* ignore content */
}html
<div class="container">
<div class="item basis-auto">Auto</div>
<div class="item basis-fixed">200px</div>
<div class="item basis-percent">50%</div>
</div>🎨 Flex Basis
auto
200px
30%
📏 Sets initial main size
⚡ Before grow/shrink
💡 Overrides width/height