The flex-grow, flex-shrink, and flex-basis properties in Flexbox are used to control how space is distributed within a flex container. These properties allow the size of flexible elements to be adjusted in a much more precise and dynamic manner.

flex-grow Property

The flex-grow property determines how much an element can grow relative to the other elements within the same flex container, when extra space is available.

• Default value: 0 (The element will not grow)

Using flex-grow

css

Example

html

[Placeholder: Image showing a row of flexible elements where the second element grows twice as much as the first and third]

flex-shrink Property

The flex-shrink property determines how much an element can shrink relative to the other elements within the same flex container, when there is a lack of space.

• Default value: 1 (The element can shrink if necessary)

Using flex-shrink

css

Example

html

[Placeholder: Image showing a row of flexible elements within a 200px wide container. The elements shrink to fit the available width, and the second shrinks more than the first and third]

flex-basis Property

The flex-basis property sets the flexible basis, which is the initial size of an element before the extra space is distributed or the flex-grow and flex-shrink adjustments are applied.

• Default value: auto (Content size)

Using flex-basis

css

Example

html

[Placeholder: Image showing a row of flexible elements with specific base sizes assigned, where the second element has a basis of 200px and the other two have 100px]

Combining flex-grow, flex-shrink, and flex-basis

These properties can be combined to achieve more precise control over the behavior of flexible elements within the container.

Complete Example

html

[Placeholder: Image showing a row of flexible elements within a container, with varying growth, shrinkage, and base size behaviors]

Summary

• flex-grow: Controls how much an element can grow relative to others.
• flex-shrink: Controls how much an element can shrink relative to others.
• flex-basis: Sets the initial base size of the element.

Proper use of flex-grow, flex-shrink, and flex-basis will allow you to create highly flexible and adaptable layouts, optimizing space distribution in your web design according to the specific needs of your project.