CSS - flex-basis

The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing.

Example

 

HTML

HTML
<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>

CSS

CSS
.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: 'auto';
}

.flex2 {
  flex-basis: -webkit-max-content;
  flex-basis: -moz-max-content;
  flex-basis: max-content;
}

.flex2:after {
  content: 'max-content';
}

.flex3 {
  flex-basis: -webkit-min-content;
  flex-basis: -moz-min-content;
  flex-basis: min-content;
}

.flex3:after {
  content: 'min-content';
}

.flex4 {
  flex-basis: -webkit-fit-content;
  flex-basis: -moz-fit-content;
  flex-basis: fit-content;
}

.flex4:after {
  content: 'fit-content';
}

.flex5 {
   flex-basis: content;
}

.flex5:after {
  content: 'content';
}

.flex6 {
  flex-basis: -webkit-fill-available;
  flex-basis: -moz-available;
  flex-basis: fill;
}

.flex6:after {
  content: 'fill/-webkit-fill-available/-moz-available';
}

Results

Syntax  

CSS
/* Specify <'width'> */
flex-basis: 10em;      
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

Values

<'width'>
Defined as a number followed by a absolute unit such as px, mm or pt, or a percentage of the parent flex container main size property. Negative values are invalid.
content
Indicates automatic sizing, based on the flex item’s content.
Note:Note that this value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using auto together with a main size (width or height) of auto.

Note: Brief history

  • Originally, "flex-basis:auto" meant "look at my width or height property".
  • Then, flex-basis:auto was changed to mean automatic-sizing, and "main-size" was introduced as the "look at my width or height property" keyword. It was implemented in bug 1032922.
  • Then, that change was reverted in bug 1093316, so "auto" once again means "look at my width or height property"; and a new 'content' keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword).

Formal syntax

CSS
content <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="[ &lt;length&gt; | &lt;percentage&gt; ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto" href="css/width"><'width'></a>

Description  

The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing.

Initial valueauto
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Percentagesrefer to the flex container's inner main size
Mediavisual
Computed valueas specified, but with relative lengths converted into absolute lengths
Animatableyes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
Canonical orderthe length or percentage before the keyword, if both are present

Browser Compatibility  

Feature Firefox (Gecko) Chrome Internet Explorer Edge Opera Safari
Basic support 18.0 (18.0)[1]
22.0 (22.0)[2]
21.0-webkit 11[3] 12 12.10 7.0-webkit[4]
auto 18.0 (18.0) 21.0 11 12 12.10 7.0-webkit
content No support[5] No support No support 12 No support No support
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? No support 12.10 No support

[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Firefox supports multi-line flexbox since Firefox 28.

[2] In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] When a non-auto flex-basis is specified, Internet Explorer 10-11 (but not 12+) always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element. See Flexbug #7 for more info.

[4] See Safari 7.0.

[5] See bug 1105111.

See Also  

Specifications  

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-basis' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/flex-basis

CSS CSS Flexible Boxes CSS Property NeedsMobileBrowserCompatibility Reference