CSS flex-basis define the initial base size of the flex-item. Note that the final size of flex-item will depend upon flex-grow and flex-shrink values.
Syntax:
.someflexcontainer {
display: flex;
}
.flexitem {
flex-basis: 20%;
}CSS property flex-basis
| CSS version: | CSS 3 |
| Value: | content | [width] |
| Initial: | auto |
| Applies to: | flex items |
| Inherited: | no |
Example – flex-basis
In the following code, CSS property flex-basis can be changed to the following values
- 20%
- content
<style>
.fbox {
display: flex;
width: 250px; background-color:gray;
}
.child {
background-color:green;
padding: 3px; margin: 3px;
flex-basis: 20%;
}
</style>
<div class=fbox>
<div class="child">div1</div>
<div class="child">div2 long</div>
<div class="child">div3</div>
</div>flex-basis refresh
Specification and Browser compatibility
| Specification | Status | Categories |
|---|---|---|
| Flexible Box Layout Module | W3C Working Draft | CSS3 |
| Chrome | Firefox | IE | Edge | Safari | Opera |
|---|---|---|---|---|---|
| Yes 29+ | Yes 28+ | Partial 11+ | Yes 12+ | Yes 9+ | Yes 12.1+ |
| Android Chrome | Android Firefox | iOS Safari | IE Mobile | Opera Mobile |
|---|---|---|---|---|
| Yes 47+ | Yes 44+ | Yes 9.0-9.2+ | Yes 11+ | Yes 12.1+ |
source: caniuse.com
