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 with a keyword value like auto or initial instead of setting flex-basis on its own. The keyword values expand to reliable combinations of flex-grow, flex-shrink, and flex-basis, which help to achieve the commonly desired flex behaviors.

Try it

flex-basis: auto;

flex-basis: 0;

flex-basis: 200px;


  
Item One

  
Item Two

  
Item Three




.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

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:

  • sets an absolute value.
  • 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'>  

 = 
  auto                                      |
                   |
  min-content                               |
  max-content                               |
  fit-content(  )  |
                               |
                             

 = 
        |
    

 = 
  calc-size(  ,  )  

 = 
  anchor-size( [  ||  ]? , ? )  

 = 
    |
     |
  any             |
        

 = 
   [ [ '+' | '-' ]  ]*  

 = 
    

 = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

 = 
   [ [ '*' | / ]  ]*  

 = 
          |
       |
      |
    |
  (  )  

 = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Examples

Setting flex item initial sizes

HTML

html
    
  
  • 1: flex-basis test
    • 
  
  • 2: flex-basis test
    • 
  
  • 3: flex-basis test
    • 
  
  • 4: flex-basis test
    • 
  
  • 5: flex-basis test
    • 




    
  
  • 6: flex-basis test
    •

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, which will be styled similarly except for their flex-basis values. The containers each have two children: a heading

and a
. The
element has a content
child, which will not be set as a flex item but will be given a height.

html

  
heading

  

    flex-basis: 0;
    

  





  
heading

  

    flex-basis: 0%;

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 column. The first container's flex items have a flex-basis value of 0, while the second container's flex items 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 cannot exceed 200px and their children have a height of 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

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
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

See also