Web/CSS/flex-basis

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.

Syntax

/* 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;

The flex-basis property is specified as either the keyword content or a <'width'>.

Values

<'width'>

An absolute <length>, a <percentage> of the parent flex container's main size property, or the keyword auto. Negative values are invalid. Defaults to auto.

content

Indicates automatic sizing, based on the flex item’s content.

Note: 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.

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 definition

Initial value	`auto`
Applies to	flex items, including in-flow pseudo-elements
Inherited	no
Percentages	refer to the flex container's inner main size
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	a length, percentage or calc();

Formal syntax

content | <'width'>

Examples

Setting flex item initial sizes

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

.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: 14px;
  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: 12px;
}

.flex1 {
  flex-basis: auto;
}

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

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

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

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

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

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

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

.flex5 {
   flex-basis: content;
}

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

.flex6 {
  flex-basis: fill;
}

.flex6:after {
  content: 'fill';
}

Results

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`flex-basis`	Chrome Full support 29 Full support 29 Full support 22 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 22 Notes' Full support 22 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. No support 18 — 28 Disabled' Disabled' From version 18 until version 28 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' When a non-`auto` `flex-basis` is specified, Internet Explorer 10 and 11 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.	Opera Full support 12.1 Full support 12.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 22 Notes' Full support 22 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 44 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 44: this feature is behind the `layout.css.prefixes.webkit` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. No support 18 — 28 Disabled' Disabled' From version 18 until version 28 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 12.1 Full support 12.1 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
`auto`	Chrome Full support 22	Edge Full support 12	Firefox Full support 18	IE Full support 11	Opera Full support 12.1	Safari Full support 9 Full support 9 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support ≤37	Chrome Android Full support 25	Firefox Android Full support 18	Opera Android Full support 12.1	Safari iOS Full support 9 Full support 9 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 1.5
`content`	Chrome No support No	Edge No support 12 — 79	Firefox Full support 61	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 61	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`max-content`	Chrome No support No	Edge No support No	Firefox Full support 66 Full support 66 Full support 22 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 66 Full support 66 Full support 22 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`min-content`	Chrome No support No	Edge No support No	Firefox Full support 66 Full support 66 Full support 22 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 66 Full support 66 Full support 22 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.