flex-basis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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.

Note: It is recommended to use the flex shorthand instead of separate flex-grow, flex-shrink, and flex-basis declarations. We have separated them here as this document is about one of the shorthand components: the flex-basis property.

Try it

In this example, the flex-grow and flex-shrink properties are both set to 1 on all three items, indicating that the flex item can grow and shrink from the initial flex-basis.

The demo changes the flex-basis value set on the first flex item, causing it to grow or shrink to fill the available space. The other flex items will also change size; they will be at least min-content-sized. For example, when the flex-basis of the first item is set to 200px, it will start at 200px but then shrink to fit the space available.

If flex-basis is set to a value other than auto and there is a width (or height in case of flex-direction: column) set for that same flex item, the flex-basis value takes precedence.

Syntax

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

/* Intrinsic sizing keywords */
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: revert;
flex-basis: revert-layer;
flex-basis: unset;

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

Values

<'width'>

Any of the following units:

  • <length> sets an absolute value.
  • <percentage> sets a percentage of the width or height of the containing block's content area. Percentage values of flex-basis are resolved against the flex container. If the flex container's size is indefinite, the used value for flex-basis is content.
  • auto uses the value of the width in horizontal writing mode, and the value of the height in vertical writing mode; when the corresponding value is also auto, the content value is used instead.
  • max-content sets the intrinsic preferred width.
  • min-content sets the intrinsic minimum width.
  • fit-content sets the maximum possible size of a containing block's content area, bounded by the min-content and max-content values, and calculated based on the content of the current element.
content

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

Formal definition

Initial valueauto
Applies toflex items, including in-flow pseudo-elements
Inheritedno
Percentagesrefer to the flex container's inner main size
Computed valueas specified, but with relative lengths converted into absolute lengths
Animation typea length, percentage or calc();

Formal syntax

flex-basis = 
content |
<'width'>

<width> =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Examples

Setting flex item initial sizes

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: 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";
}

Results

Flex basis 0 vs 0%

This example demonstrates the difference between a flex-basis of 0 versus a flex-basis of 0% when flex-direction is set to column and the flex containers and flex items don't have a set height; while 0 is an absolute length, percentage flex-basis values resolve to content values.

HTML

We include two same-structure flex containers. These which will be styled similarly, except for their flex-basis values. The containers each have two children: a heading <div> and a <section>. The <section> element has a content <div> child, which will not be set as a flex item but will be given a height.

html
<div class="container basis-0">
  <div>heading</div>
  <section>
    flex-basis: 0;
    <div class="content"></div>
  </section>
</div>
<div class="container basis-0-percent">
  <div>heading</div>
  <section>
    flex-basis: 0%;
    <div class="content"></div>
  </section>
</div>

CSS

We style the containers as inline flex containers that will appear side by side to better enable comparing them. We set the flex-direction to the column. The first container's flex items have a flex-basis value of 0 and the second container's flex item have a flex-basis value of 0%. Neither the flex containers nor their flex items have a height explicitly set, but the heights of section elements can not exceed 200px and their children have height 300px.

css
.container {
  width: 40vw;
  padding: 1rem;
  border: 1px dashed blue;

  display: inline-flex;
  flex-direction: column;
}

section {
  border: 1px solid red;

  overflow: auto;
  min-height: 200px;
}

.content {
  background: wheat;
  height: 300px;
}

.container.basis-0 > * {
  flex-basis: 0;
}
.container.basis-0-percent > * {
  flex-basis: 0%;
}

Results

In the first container, with flex-basis: 0, the <section> element has an initial main size of zero, and it grows to the 200px height limit. In the second container, with flex-basis: 0%, the <section> element has an initial main size of 300px because, as the flex container doesn't have a set height, the percentage flex-basis values resolve to the content value.

Specifications

Specification
CSS Flexible Box Layout Module Level 1
# flex-basis-property

Browser compatibility

BCD tables only load in the browser

See also