What is the CSS flex-basis property?

The flex-basis property in CSSCascade Style Sheets is used to define the initial main size of flexible items.

There is no effect of this property on non flexible items.

Syntax


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

Property values

  • number: It is used to define the percentage, or the unit of the length to set the initial length of flexible items.

  • auto: It is the default value. If there is no specified length then the length depends on the content.

  • initial: sets the value to its default value.

  • inherit: inherits the property from its parent value.

Code

The basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the flex-basis property is as follows:

In this example, we can see that we have set the value of flex-basis as 200px. We can see that the size of the box with the flex-basis value defined is smaller than the size of the other boxes. We can also set the value depending upon the requirements.

Free Resources