CSS flex-basis Property
The flex-basis property defines the initial main size of the flexible item. When the flex-basis property is not included, its value is set to 0%.
The flex-basis property is one of the CSS3 properties.
If there are no flexible items,flex-basis property won't have any effect.
| Initial Value | auto |
| Applies to | Flex items, including in-flow pseudo-elements. |
| Inherited | No. |
| Animatable | Yes. Items are animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.flexBasis = "100px"; |
Syntax
flex-basis: number | auto | initial | inherit;Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 300px;
height: 80px;
border: 1px solid #666;
display: -webkit-flex; /* Safari */
display: flex;
}
.box div {
-webkit-flex-grow: 0; /* Safari 6.1+ */
-webkit-flex-shrink: 0; /* Safari 6.1+ */
-webkit-flex-basis: 50px; /* Safari 6.1+ */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
.box div:nth-of-type(2) {
-webkit-flex-basis: 150px; /* Safari 6.1+ */
flex-basis: 140px;
}
</style>
</head>
<body>
<h2>Flex-basis property example</h2>
<div class="box">
<div style="background-color: #eee;">40px</div>
<div style="background-color: #1c87c9;">140px</div>
<div style="background-color: #8ebf42;">40px</div>
<div style="background-color: #ccc;">40px</div>
<div style="background-color: #666;">40px</div>
</div>
</body>
</html>Values
| Value | Description |
|---|---|
| number | Specifies the length of the item by "auto", "inherit", or a number followed by "%", "px", "em" etc. |
| auto | This value is the default value of this property. Length is equal the flexible item's length. If there is no specified item length, it will be according to its content. |
| initial | Sets the property to its default value. |
| inherit | Inherits this property from its parent element. |
Browser support
|
|
|
|
|
|
|---|---|---|---|---|
|
29.0+ 21-28 -webkit- |
12.0+ | 28.0+ |
9.0+ 6.1-8.0 -webkit- |
12.1+ |