Flex Layout in Flex-basis|flex-grow|flex-shrink

Flex layout in Flex-basis|flex-grow|flex-shrink

The three attributes of Flex-grow, Flex-shrink, and flex-basis are: In the flex layout, the parent element is at different widths, and the child element is allocated the space of the parent element.

Of these, these three properties are set on child elements.
Note: The following parent element refers to the element with Flex layout (Display:flex).

Flex-basis

the property to set the width of the element. Of course, width it can also be used to set the element width. If the element is both set width and flex-basis , then flex-basis width the value is overwritten .

Flex-grow

This property is set to how the child element allocates the remaining space of the parent element when the width of the parent element is greater than the width of all child elements (that is, the parent element will have the remaining space).
flex-growThe default value is 0, which means that the element does not claim the remaining space of the parent element, and if the value is greater than 0, it is claimed. The higher the value, the greater the demand.
As an example:
The parent element is 400px wide and has two child elements: A and B. A width of 100px,b is 200px wide.
The free space is 400-(100+200) = 100px.
If a, b do not take the remaining space, there is 100px of free space.
If a requests the remaining space: set Flex-grow to 1,b not to ask. Then the size of the final A is its own width (100px) + the width of the remaining space (100px) = 200px
If a, B are set to claim the remaining space, a set Flex-grow to 1,b setting Flex-grow to 2. Then the size of the final A is the width (100px (1/(1+2)) of the remaining space obtained by its own width (100px) + A, and the final size of B is the width of the remaining space (100px (2/(1+2)) obtained from its own width (200px) + b)

Flex-shrink

This property is set when the width of the parent element is less than the width of all child elements (that is, the child element is beyond the parent element), and how the child element narrows its own width.
flex-shrinkThe default value is 1, and when the width of the parent element is less than the width of all child elements, the width of the child element decreases. The larger the value, the more severe the decrease. A value of 0 indicates no decrease.
As an example:
The parent element is 400px wide and has two child elements: A and B. A width of 200px,b is 300px wide.
Then A and a a total exceeds the width of the parent element (200+300)-100px.
If A and B do not reduce the width, that is, the Flex-shrink is set to 0, then the width of 100px will exceed the parent element.
If a does not decrease the width: set Flex-shrink to 0,b decrease. Then the size of the final B is its own width (300px)-Total beyond the parent element's width (100px) = 200px
If A and B both decrease in width, a sets Flex-shirk to 3,b setting Flex-shirk to 2. Then the size of the final A is the width of its own width (200px)-A decreases (100px (3/(2+3))), and the final B is the size of its own width (300px)-B Reduced Width (100px (2/(2+3)))

Flex Layout in Flex-basis|flex-grow|flex-shrink