Quoc Nguyen3,957 Points
Differences between flex-grow: 1; and flex: 1;
I tried flex-grow: 1; and the shorthand flex: 1; The result is different for each. Could you please explain why as I expected similar result.
Sergey Podgornyy20,657 Points
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. If the element is not a flexible item, the flex-grow property has no effect.
The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container. The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. If the element is not a flexible item, the flex property has no effect.
As Guil mentioned in the video, if you use the shorthand
flex-basis property will be set to
0 (zero ), so it won't wrap the items, it will continue to shrink down towards a zero width.
The initial value for
flex-basis is actually
0, so if you don't set the
flex-basis and only use
flex-grow, that's what the value will be.