Inside a Flexbox container, each item can react differently to the available space: some need to grow to fill the gap, others need to stay a fixed size, and others should never shrink below a certain width. The flex property packs those three behaviors into a single declaration.
It comes up whenever a layout needs to split space unevenly between items: a fixed-width sidebar next to a main content area that takes up all the rest, or three columns where only one should stretch more than the others.
Definition
flex is a shorthand that combines three properties into a single declaration: flex-grow, flex-shrink and flex-basis, in that order. It gets set on a flex item, never on the container.
.item {
flex: 1 1 200px;
}Here, the item can grow (1), can shrink (1), and its starting size before any calculation is 200 pixels (200px). Each of those three values answers a specific question.
The three properties in detail
| Property | Question it answers | Default value |
|---|---|---|
flex-grow | Does the item grow to fill the remaining space? | 0 |
flex-shrink | Does the item shrink when space runs out? | 1 |
flex-basis | What is its starting size, before any calculation? | auto |
flex-grow and flex-shrink accept numbers that work as relative proportions: an item with flex-grow: 2 grows twice as fast as an item with flex-grow: 1, assuming both compete for the same leftover space.
The shortcuts used most often
Three writings come up so often that most developers barely ever set the three values separately.
| Writing | Full equivalent | Effect |
|---|---|---|
flex: 1 | flex-grow: 1, flex-shrink: 1, flex-basis: 0% | The item takes an equal share of the available space |
flex: auto | flex-grow: 1, flex-shrink: 1, flex-basis: auto | The item grows and shrinks starting from its natural size |
flex: none | flex-grow: 0, flex-shrink: 0, flex-basis: auto | The item always keeps its natural size, no growing or shrinking |
flex: 1, likely the most used of the three, grows and shrinks the item from a base of zero: that is what lets several items with flex: 1 share exactly the same space, regardless of their content.
A concrete example
A classic layout with a fixed sidebar and an expandable main content area shows off exactly why combining two different flex values matters.
.layout {
display: flex;
}
.sidebar {
flex: none;
width: 240px;
}
.content {
flex: 1;
}The sidebar always keeps its 240 pixels thanks to flex: none, no matter the screen width, while the main content automatically takes up all the remaining space thanks to flex: 1.
The pitfall: flex-shrink never goes below zero
flex-shrink accepts any positive number or zero, but never a negative value. Writing flex-shrink: -1 to stop an item from shrinking has no effect at all; it is an invalid value, silently ignored by the browser, which falls back to the default instead.
flex-shrink: 0, not a negative number. flex-shrink: 0 paired with a fixed flex-basis guarantees that an item, like a logo or an icon, always keeps its exact size, even as its neighbors get squeezed.Frequently asked questions
flex-basis and a sizing property like width?flex-basis sets an item's starting size before flex-grow and flex-shrink come into play, while CSS sizing like width sets a size independent of that flex calculation. When flex-basis is anything other than auto, it takes priority over width on the main axis, which often surprises developers who assume width alone controls the size.
flex-basis?Yes, and it is actually very common, for building columns proportional to the container's width, for example flex-basis: 33% for three equal columns. Paired with flex-wrap, that makes it possible to build a card grid that automatically reorganizes across several lines.
flex: 1 and flex: auto produce the same result?No, despite a common mix-up. flex: 1 starts from a base of zero and splits all the available space equally, ignoring the content's natural size. flex: auto starts from the content's natural size, then grows or shrinks from that base, which produces uneven widths if the items' content differs in length.