3 attributes of FLEX (1) Flex-grow

Flex-grow

This article first introduces the issue of flex value. later articles will explain in depth the application of flexible layout.
1. Flex is composed of flex-grow, flex-shrink, and flex-basis. View

Among them, flex-grow indicates how much space the parent container has on the spindle.
Understanding about the remaining space: how much space is available to the parent container (elastic box) in the direction of the main axis.

The outer Div has an elastic layout. The remaining space is box. Width-item01.width-item02.width-item03.width.
The default value of flex-grow is 0 and it is not a negative number.

Eg01:

Result:

Set the class = "item02" Div and style to flex: 2. effect:

Only the class = "item02" Div sets the flex: 2 style, meaning that the remaining space is divided into two parts. The default value 0 for item02.flex indicates that no space is left.

3 attributes of FLEX (1) Flex-grow