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%