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.
Usage example
.flex-item {
flex-basis: 300px;
flex-grow: 1;
/* starts at 300px width, then grows to fill space */
}Initial value
auto
Inherited
No
Applies to
flexItemsAndInFlowPseudos
Animation type
lpc
Values
contentwidth 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.
Safe to use without fallbacks.
29+
22+
9+
12+