CSS3 flex-basis Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The flex-basis CSS property specifies the initial main size of the flex item.
The following table summarizes the usages context and the version history of this property.
| Default value: | auto |
|---|---|
| Applies to: | Flex items |
| Inherited: | No |
| Animatable: | Yes. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the flex-basis property in action.
Example
Try this code ».flex-container {
display: flex;
}
.item1 {
background: #ff80c0;
-webkit-flex-basis: 300px; /* Safari 6.1+ */
flex-basis: 300px;
}
.item2 {
background: #8080ff;
-webkit-flex-basis: 30%; /* Safari 6.1+ */
flex-basis: 30%;
}
.item3 {
width: 120px;
background:#0080ff;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| width | A length in absolute or relative units that specifies the initial length of the flexible item. Negative values are invalid. |
auto |
The width of the flexible item is equal to the value of it's width property. If the width property isn't specified for the flexible item, the width will be according to its content. This is default value. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element flex-basis property. |
Browser Compatibility
The flex-basis property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Multi-column Layouts.
Related properties: align-content, align-items, align-self, display, flex, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.
