Interactive online courses HTML Academy
2026-03-09 12:24 Diff
https://htmlacademy.org/courses/layout/flexbox-2/flex-shorthand

You can use the flex shorthand property to simultaneously set the growth and shrinkage factors as well as the basic size of the flex item.

The flex property consists of three components that are separated by spaces and that are ordered as follows: flex-grow, flex-shrink and flex-basis. You can see how the two rules are similar in the example below:

.flex-item { flex: 1 2 300px; } .flex-item { flex-grow: 1; flex-shrink: 2; flex-basis: 300px; }

The flex property has the following special values: initial, auto, and none. In addition, you should bear in mind that the second and third components are optional. The various property values and their meanings are shown below.

flex: initial; -> flex: 0 1 auto; flex: auto; -> flex: 1 1 auto; flex: none; -> flex: 0 0 auto; flex: 1 0; -> flex: 1 0 0%; flex: 1; -> flex: 1 1 0%;

Some browsers will interpret incomplete or special values for the flex property with errors. Therefore, it is better to specify all three components in the value of this property.

Let’s try out this value in practice.