W3docs
en
Log in

CSS flex-basis Property

The CSS flex-basis property defines the initial main size of the flexible item. When the property is not included, its value is set to 0%.

The flex-basis property specifies the initial main size of a flexible item. When this property is not specified, its initial value is auto.

The flex-basis property is one of the CSS3 properties.

If there are no flexible items, the flex-basis property won't have any effect.

When flex-basis is set to a specific length or percentage, it takes precedence over width (or height if flex-direction is column) for determining the item's initial main size.

Note: The flex shorthand property sets flex-basis along with flex-grow and flex-shrink. If flex is specified, it takes precedence over the standalone flex-basis property.

Initial Valueauto
Applies toFlex items, including in-flow pseudo-elements.
InheritedNo.
AnimatableYes. Items are animatable.
VersionCSS3
DOM Syntaxobject.style.flexBasis = "100px";

Syntax

Syntax of CSS flex-basis Property

flex-basis: length | percentage | auto | initial | inherit | min-content | max-content | fit-content | content;

Basic example

Example of CSS flex-basis Property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 300px;
        height: 80px;
        border: 1px solid #666;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 40px;
      }
      .box div:nth-of-type(2) {
        flex-basis: 140px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;">40px</div>
      <div style="background-color: #1c87c9;">140px</div>
      <div style="background-color: #8ebf42;">40px</div>
      <div style="background-color: #cccccc;">40px</div>
      <div style="background-color: #666666;">40px</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS flex-basis property

Example with all values

Example of the flex-basis property with all the values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 60px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 40%;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        flex-basis: auto;
        background-color: yellow;
      }
      .box div:nth-of-type(4) {
        flex-basis: initial;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        flex-basis: inherit;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        number 60px
      </div>
      <div>
        percentage 40%
      </div>
      <div>
        auto
      </div>
      <div>
        initial
      </div>
      <div>
        inherit
      </div>
    </div>
  </body>
</html>
Try it Yourself »

Example with pixel values

Example of the flex-basis property specified in pixels:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 460px;
        height: 70px;
        display: flex;
      }
      .box div {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 70px;
        padding: 15px;
      }
      .box div:first-child {
        background-color: #40c3da;
      }
      .box div:nth-of-type(2) {
        flex-basis: 100px;
        background-color: lightgreen;
      }
      .box div:nth-of-type(3) {
        background-color: #1c87c9;
      }
      .box div:nth-of-type(4) {
        flex-basis: 150px;
        background-color: orange;
      }
      .box div:nth-of-type(5) {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Flex-basis property example</h2>
    <div class="box">
      <div>
        70px
      </div>
      <div>
        100px
      </div>
      <div>
        70px
      </div>
      <div>
        150px
      </div>
      <div>
        70px
      </div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
length | percentageSpecifies a fixed size using units like px, em, rem, or a percentage (%).Play it »
autoThe default value. The item's size is determined by its content or width/height properties.Play it »
initialSets the property to its default value.Play it »
inheritInherits this property from its parent element.
min-contentSizes the item based on the minimum content width/height.Play it »
max-contentSizes the item based on the maximum content width/height.Play it »
fit-contentSizes the item based on the fit-content function.Play it »
contentSizes the item based on its content.Play it »

Practice

Practice

What does the 'flex-basis' property do in CSS?