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:
| length | Sets 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. |
| auto | This is the default value. The flex item(s) remains in its original size. |
| initial | Sets the flex-basis property to its default value(auto). |
| inherit | Inherits the flex-basis property from the parent element. |
General Info
| Default Value | auto |
| Inherited | No |
| JavaScript Usage | element.style.flexBasis = “200px” |
