1 <p>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.</p>

2 <p>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:</p>

3 .flex-item { flex: 1 2 300px; } .flex-item { flex-grow: 1; flex-shrink: 2; flex-basis: 300px; }<p>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.</p>

4 flex: initial; -&gt; flex: 0 1 auto; flex: auto; -&gt; flex: 1 1 auto; flex: none; -&gt; flex: 0 0 auto; flex: 1 0; -&gt; flex: 1 0 0%; flex: 1; -&gt; flex: 1 1 0%;<p>Some browsers will interpret incomplete or special values for the flex property<a>with errors</a>. Therefore, it is better to specify all three components in the value of this property.</p>

5 <p>Let’s try out this value in practice.</p>