In this section, we will learn what the flex-basis property is and how to use it in CSS.

Click here to run the example of flex-basis property.

CSS flex-basis Property Definition and Usage

Flex-items within a Flex-container have an initial width. This size is determined naturally by the content size or each item or explicitly set using `width` property.

But in case of Flexbox, there is a new property named `flex-basis` by which we can set the value for the width of a flex-item.

CSS flex-basis Property Syntax

flex-basis: number|auto|initial|inherit;

CSS flex-basis Property Value

The default value of `flex-basis` property is “auto” which means it will check to see if the target flex-item has a `width` property with explicit value and use that as the value for the target element. Otherwise, the width is determined naturally by the size of the content within the target element.

Other than “auto” any value we use for `width` property can be set for `flex-basis` property as well.

If we assign a value other than “auto” to `flex-basis` property, it’ll render the value set for `width` property useless.

Example: flex-basis property in CSS

See the Pen flex-basis property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.