flex
is a shorthand property of flex-grow
, flex-shrink
and flex-basis
.
In this case, flex: 1
sets
flex-grow: 1
flex-shrink: 1
flex-basis: 0
(in old spec drafts it wasflex-basis: 0%
)
If you only use flex-grow: 1
, you will have
flex-grow: 1
flex-shrink: 1
flex-basis: auto
Then, the difference is that the flex base size will be 0 in the first case, so the flex items will have the same size after distributing free space.
In the second case each flex item will start with the size given by its content, and then will grow or shrink according to free space. Most probably the sizes will end up being different.