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.
  • 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,∞]> )  

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

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

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also