CSS flex-basis Property
Example
#example div {
flex-basis: 50px;
}Note: Try to resize browser window:
3
Meaning
The flex-basis property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
In simple words the flex-basis property sets the flex basis.
It accepts the same values as the width and height property and content.
For all values other than auto and content (defined above), flex-basis is resolved the same way as width in horizontal writing modes, except that if a value would resolve to auto for width, it instead resolves to content for flex-basis.
For example, percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its flex container); and if that containing block’s size is indefinite, the used value for flex-basis is content.
As another corollary, flex-basis determines the size of the content box, unless otherwise specified such as by box-sizing.
| Default value: | auto |
| Inherited: | No |
| Animatable: | Yes |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
flex-basis: number|auto|initial|inherit|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| number | Specifies a length unit, or percentage, specifying the initial length of the flexible item(s). |
| auto | This is default value. The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
flex-basis: auto;
}More Example
Example
.container {
display: flex;
flex-basis: auto;
}