The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. It sets how a flex item grows or shrinks to fit space in its flex container.
Apply it to children of a display: flex (or inline-flex) container. For most layouts, MDN recommends auto, initial, none, or a positive unitless number such as 1.
Not deprecated. Prefer the flex shorthand over setting the three longhands separately unless you need only one of them.
flex: none | [ <grow> <shrink>? || <basis> ];One value: a grow number (flex: 1 → 1 1 0%) or a basis (flex: 10em → 1 1 10em). Two or three values set grow, shrink, and/or basis in order.
| Value | Description | Try it |
|---|---|---|
initial | 0 1 auto — no grow, can shrink, content-sized basis | Try it |
auto | 1 1 auto — can grow and shrink from content size | Try it |
none | 0 0 auto — fixed; neither grows nor shrinks | Try it |
1 (number) | 1 1 0% — share free space evenly with siblings | Try it |
2 / ratios | Higher grow factor takes a larger share of free space | Try it |
1 30px | Grow from a 30px basis (shrink defaults to 1) | Try it |
1 1 100px | Full three-value form: grow, shrink, basis | Try it |
inherit | Takes the parent's flex value | Try it |
flexMake a flex container, then size the items with flex.
display: flex on the parent.1, auto, none, or initial.2 vs 1) when one item should take more free space.min-width: 0 (or min-height: 0) if an item refuses to shrink below its content.| Piece | Required? | Role |
|---|---|---|
| Flex container | Yes | display: flex or inline-flex on the parent |
flex on items | Typical | Controls grow, shrink, and basis per item |
| Free space | To see grow | Container wider/taller than content sum |
| Inherited | No | Set on each flex item that needs it |
Change flex on the pink item. The other two stay at flex: 1.
Each snippet focuses on flex. Use Try It Yourself for a live editor.
Share free space evenly with flex: 1.
<style>
.row { display: flex; }
.row > * { flex: 1; }
</style>
<div class="row">
<span>A</span><span>B</span><span>C</span>
</div>display: flex on the parent.flex: 1. Expands to 1 1 0%.Keep one item from growing or shrinking.
<style>
.row { display: flex; }
.grow { flex: 1; }
.fixed { flex: none; width: 4rem; }
</style>
<div class="row">
<span class="grow">Grow</span>
<span class="fixed">Fix</span>
</div>flex: none means 0 0 auto.flex: 1 takes the leftover space.Give one item twice the free space of another.
<style>
.row { display: flex; }
.a { flex: 2; }
.b { flex: 1; }
</style>
<div class="row">
<span class="a">2</span>
<span class="b">1</span>
</div>0% basis when you use a bare number.2 gets twice as much as 1.If items will not grow or shrink as expected, check these first.
flex only applies to flex items. Set display: flex on the parent first.
By default, items resist shrinking below their content. Use min-width: 0 (or min-height: 0) to allow tighter shrink.
flex: 1 is 1 1 0%, not 1 1 auto. Prefer the shorthand values MDN lists for predictable results.
A set width can fight with flex-basis. Prefer flex for flexible sizing; use width mainly with flex: none.
order can rearrange items visually. Keep DOM order sensible for keyboard and screen-reader flow.
flex is a browser CSS property for flex items. Node.js, Deno, and Bun do not apply it.
Supported in all modern browsers. Older Internet Explorer needs the 2012 flexbox syntax in some cases.
Bottom line: Safe for modern flex layouts. Prefer the flex shorthand for grow/shrink/basis. It is not a runtime API.
1, auto, none, initial.flex: 1 → 1 1 0% for even flexible columns.display: flex, then flex on children.One line: use flex on items to decide who grows, who shrinks, and from what starting size.
Set the starting main size of a flex item.
8 people found this page helpful