CSS flex-basis

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.


.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
.fbox {
  display: flex;
  width: 250px; background-color:gray;
.child {
  padding: 3px; margin: 3px;
  flex-basis: 20%;

<div class=fbox>
<div class="child">div1</div>
<div class="child">div2 long</div>
<div class="child">div3</div>
flex-basis refresh

Specification and Browser compatibility

Flexible Box Layout ModuleW3C Working DraftCSS3
Yes 29+ Yes 28+ Partial 11+ Yes 12+ Yes 9+ Yes 12.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 9.0-9.2+ Yes 11+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments