CSS flex-basis Property

CSS flex-basis property sets the initial size of a flex item. This means if the flex direction is row, it sets the initial width and if the flex direction is column, it sets the initial height of the flex item.

In the example below, we have set the initial width of the second flex item to 200px using the flex-basis property. Try it out to see how it works:

Example:

#item2{
  flex-basis: 200px;
}

We can also specify the flex-basis property in percentage(%). The percentage value is calculated from the total size(here width) of the flex container.

In the example below, we have set the flex-basis property to 50% for the second flex item. It means that this item will take up 50% width of its flex container.

Example:

#item2{
  flex-basis: 50%;
}

CSS Syntax

The flex-basis property has the following syntax:

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

Property Values

The flex-basis property accepts the following values:

lengthSets the initial size(width if the flex-direction is row and height if the flex-direction is column) of a flex item. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’, etc. and in percentage(%) also.
autoThis is the default value. The flex item(s) remains in its original size.
initialSets the flex-basis property to its default value(auto).
inheritInherits the flex-basis property from the parent element.

General Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.flexBasis = “200px”