The flex-basis property sets the initial width of a flex item.
Flex items are elements inside a flex container.
Three flex items with different flex-basis values.
<style>
.flex-basis {
background-color: #776fac;
padding: 5px;
display: flex;
}
.flex-basis > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>
<div class="flex-basis">
<div style="flex-basis: 120px">1</div>
<div style="flex-basis: 80px">2</div>
<div style="flex-basis: 50px">3</div>
</div>
flex-basis: auto | length | initial | inherit;
| Value | Description |
|---|---|
| auto | Default. Item widths will be according to their content. |
| length | Length unit. Any valid CSS length value. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different flex-basis values.
<style>
.flex-contain {
background-color: #776fac;
padding: 5px;
display: flex;
}
.flex-contain > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
flex-basis: 120px;
}
div.flex-basis-example{
flex-basis: auto;
}
</style>
<div class="flex-contain">
<div>1</div>
<div>2</div>
<div class="flex-basis-example">
3
</div>
</div>
This table shows when flex-basis support started for each browser.
 Chrome
|
29.0 | Aug 2013 |
 Firefox
|
28.0 | Mar 2014 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
17.0 | Aug 2013 |
 Safari
|
9.0 | Sep 2015 |
