flex-basis
Defines the initial size of a flex item before the container distributes any remaining space. It works like width or height depending on the flex-direction.
It is documented as part of the CSS Flexible Box Layout specification.
Syntax
/* Usage Example */
.flex-item {
flex-basis: 300px;
flex-grow: 1;
/* starts at 300px width, then grows to fill space */
}
/* Syntax */
flex-basis: content;
flex-basis: width;
/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: revert-layer;
flex-basis: unset;flex-basis Browser support
Widely available
Since
2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
29+
22+
9+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more