Look at the MDN documentation:
One-value syntax: the value must be one of:
- a
<number>
: In this case it is interpreted as flex: <number> 1 0;
the <flex-shrink>
value is assumed to be 1
and the <flex-basis>
value is assumed to be 0
.
So:
flex: 2;
is equivalent to:
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
If you change it to:
flex-grow: 2;
you lose the
flex-shrink
and
flex-basis
values.
flex-shrink
defaults to
1
, but you've set the default
flex-basis
to
100%
:
section > *
{
flex-basis: 100%;
}
That means the elements will stretch to fill the full width of the container, which is why you're getting a "stacked" layout.
If you add
flex-basis: auto;
to each element which you change to
flex-grow
, you will keep the same layout:
flex or flex-grow[
^]