Flex shorthand

Write grow, shrink and basis in one line with the flex shorthand.

The flex shorthand

The flex shorthand writes flex-grow, flex-shrink and flex-basis in one line. The form is flex: grow shrink basis. For example, flex: 1 0 auto means grow 1, shrink 0, basis auto.

Some values can be shortened. flex: 1 actually means flex: 1 1 0%. flex: auto equals 1 1 auto.

flex: auto and flex: none

Two more common shortcuts exist. flex: auto equals flex: 1 1 auto: the item fills free space but starts from its content size. flex: none equals flex: 0 0 auto: the item neither grows nor shrinks.

These are handy shortcuts. flex: none is great for fixed-size toolbar items.

Exercise Give a card the flex shorthand

Add a flex: 1 0 200px declaration to a .card class. The card starts at 200 pixels, does not shrink, and shares free space proportionally.

Show example solution

/* flex shorthand for a card */
.card {
  flex: 1 0 200px;
}

Test yourself

What does flex: 1 stand for?
```
.item {
  flex: 1;
}
```
- flex: 0 1 auto
- flex: 1 0 auto
- flex: 1 1 0%
- flex: 0 0 auto
Show answer

flex: 1 1 0% — Correct. flex: 1 expands to flex: 1 1 0%; the item takes all free space starting from zero.

Write flex: 1 0 auto

.toolbar button {
  ____;
}

Show answer

.toolbar button {
  flex: 1 0 auto;
}

Match each shorthand to its expansion

flex: 1

1 1 0%
flex: auto

1 1 auto
flex: none

0 0 auto
flex: 0

0 1 0%

Next lesson: Order

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies