flex
A shorthand for how a flex item grows, shrinks and what size it starts from.
Syntax
flex: grow shrink basis;Values
| Parameter | Type | Description |
|---|---|---|
| 1 | number | `flex: 1` — share the free space equally (`1 1 0`). |
| grow shrink basis | values | Three values: `flex: 1 1 200px`. |
| none | keyword | A fixed size: neither grows nor shrinks. |
Examples
Items share the free space in proportion:
<style>
.row { display: flex; gap: 8px; }
.row div { padding: 8px; background: lightskyblue; }
</style>
<div class="row">
<div style="flex: 1;">flex: 1</div>
<div style="flex: 2;">flex: 2 — twice as wide</div>
<div>auto</div>
</div>Cards at least about 120px wide that fill each row:
<style>
.cards { display: flex; flex-wrap: wrap; gap: 8px; }
.cards div { flex: 1 1 120px; padding: 8px; background: palegreen; }
</style>
<div class="cards"><div>Anna</div><div>Oleg</div><div>Maria</div><div>Ivan</div></div>Notes
flex is set on the items, not on the container. flex: 1 is the most common value — equal columns that take all the free space.
See also
- flex-grow — How much of the free space a flex item takes.
- flex-shrink — How much a flex item shrinks when there is not enough space.
- flex-basis — The starting size of a flex item along the main axis, before free space is shared.
- display — Decides how an element behaves in the flow and how it lays out its content.
Related recipes
In the tutorial
- Flex items — How to control individual items in flexbox — flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, order and margin auto.