CSS propertyFlexbox

flex

A shorthand that sets an item’s flex-grow, flex-shrink, and flex-basis.

Initial value: 0 1 auto
Inherited: No
Animatable: yes, numbers and length
Applies to: flex items
JavaScript: element.style.flex = "1"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.app {
  display: flex;
  gap: 12px;
}

.app .sidebar { flex: 0 0 160px; }
.app .content { flex: 1; }

Preview

Definition and usage

The flex property combines three flex-item properties: the ability to grow (flex-grow), to shrink (flex-shrink), and the base size (flex-basis). It’s the most common way to control item sizes in Flexbox.

It’s worth memorizing a few ready-made patterns. flex: 1 gives equal columns that split up all the space (1 1 0%). flex: auto lets an item grow and shrink from the size of its content (1 1 auto). flex: none freezes an item at its natural size (0 0 auto).

The shorthand sets more sensible defaults than the individual properties: when you give just a number, flex-basis becomes 0% rather than auto.

Syntax

flex: none | auto | <flex-grow> <flex-shrink>? <flex-basis>?;

Values

0 1 auto
initial
The default value: sized from content, with no growing.
1
All items are equally wide, regardless of their content.
auto
Items grow, but starting from the size of their content, so longer ones are wider.
none
Item 2 neither grows nor shrinks, the rest share the remaining space.
2
Item 2 is twice as wide as the others, which have flex: 1.

Value	Type	Description
0 1 auto	initial	The default value: sized from content, with no growing.
1		All items are equally wide, regardless of their content.
auto		Items grow, but starting from the size of their content, so longer ones are wider.
none		Item 2 neither grows nor shrinks, the rest share the remaining space.
2		Item 2 is twice as wide as the others, which have `flex: 1`.

Values in practice

0 1 auto

The default value: sized from content, with no growing.

.demo .box { flex: 0 1 auto; }

All items are equally wide, regardless of their content.

.demo .box { flex: 1; }

auto

Items grow, but starting from the size of their content, so longer ones are wider.

.demo .box { flex: auto; }

none

Item 2 neither grows nor shrinks, the rest share the remaining space.

.demo .box { flex: 1; }
.target { flex: none; }

Item 2 is twice as wide as the others, which have flex: 1.

.demo .box { flex: 1; }
.target { flex: 2; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Remember three patterns: flex: 1 (equal shares), flex: auto (from content), and flex: none (no size change).
Use the shorthand instead of the three separate properties. You’ll avoid surprises with the default flex-basis.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course