CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Quoc Nguyen
Quoc Nguyen
3,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.

2 Answers

Sergey Podgornyy
Sergey Podgornyy
20,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, the 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 auto, not 0, so if you don't set the flex-basis and only use flex-grow, that's what the value will be.