CSS, flex: use 1

flex: 1; magical

First   flex Shi  flex-grow, flex-shrink, flex-basisacronym.

When  flex the value is a non-negative number, the number is a  flex-grow value, flex-shrink take 1, flex-basis set to 0% is equivalent to the following two:

.item{flex: 1;}

.item{

       flex-grow: 1;

       flex-shrink: 1;

       flex-basis: 1;}

use:

For example, in the header it has been applied to the three div after the same row. But need to first and second div row on the far left, third row on the right div needed most. Can be directly applied only to the second div flex: 1; (i.e. to trip all the remaining space second div gave, third div naturally pushed to the right-most)