These three properties are set on the items and decide how they share space.
flex-basis: the starting size
The size an item wants before any growing or shrinking. It works like width in a row (and like height in a column). The default is auto, which means “use my width or content size”.
flex-grow: share out extra space
If the container has leftover space, flex-grow says how much of it each item gets. The default is 0, which means “don’t grow”. Items share leftover space in proportion to their numbers.
<style>
.container { background: #f4f9fc; border: 2px dashed #1a5276; padding: 8px; }
.box { background: #d94a00; color: #fff; padding: 12px 18px; font-weight: bold; }
.container { display: flex; gap: 6px; margin-bottom: 8px; }
.box { text-align: center; }
p { margin: 6px 0 2px; font-size: 13px; }
</style>
<p>No grow: items keep their size.</p>
<div class="container"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>
<p>flex-grow: 1 on each: equal shares.</p>
<div class="container">
<div class="box" style="flex-grow:1">1</div><div class="box" style="flex-grow:1">2</div><div class="box" style="flex-grow:1">3</div>
</div>
<p>flex-grow: 1, 2, 1: the middle one gets double.</p>
<div class="container">
<div class="box" style="flex-grow:1">1</div><div class="box" style="flex-grow:2">2</div><div class="box" style="flex-grow:1">3</div>
</div>flex-shrink: give up space when it is tight
If the items together are wider than the container, flex-shrink decides how much each one gives up. The default is 1 (everyone shrinks). flex-shrink: 0 says “never shrink me”, which is handy for sidebars and icons.
The flex shorthand
The three are usually written as one: flex: grow shrink basis.
| Shorthand | Meaning |
|---|---|
flex: 1 | Grow and share space equally, start from 0 |
flex: auto | Grow and shrink from the item’s own size |
flex: none | Fixed: no grow, no shrink |
flex: 0 0 200px | Exactly 200px, never changes |
flex: 1 1 240px | Starts at 240px, can grow and shrink |
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes everything else */That is a classic sidebar layout in two lines.
min-width and long content
min-width: auto). A long word or wide image can overflow the container. Add min-width: 0 to the item to allow shrinking.