CSS flex-basis Property

Definition and Usage

The flex-basis property sets the initial main size of a flex item — before flex-grow and flex-shrink share free or overflow space.

In a row flex container it is the starting width. In a column container it is the starting height. The initial value is auto. It applies only to flex items and is not inherited.

CSS Syntax

You can also use intrinsic keywords such as min-content, max-content, and fit-content.

Property Values

How to Use flex-basis

Put items in a flex container, then set each item’s starting main size.

1. On the parent, set display: flex (and flex-direction if needed).
2. On a flex item, set flex-basis to a length, percent, auto, or 0.
3. Add flex-grow / flex-shrink if the item should fill or compress after that start size.
4. Or use flex: 1 / flex: auto when you want the common grow + shrink + basis combo.

Live Preview

Three items can grow and shrink. Change flex-basis on the first (blue) item only.

CSS Examples

Each snippet shows only the flex container and the flex-basis you are studying. Use Try It Yourself for a live editor.

<style>
  section {
    display: flex;
  }

  div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
  }

  .first {
    flex-basis: 120px;
  }
</style>

<section>
  <div class="first">120px</div>
  <div>Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: flex;
  }

  div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
  }

  .first {
    flex-basis: 40%;
  }
</style>

<section>
  <div class="first">40%</div>
  <div>Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: flex;
  }

  div {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
  }
</style>

<section>
  <div>Short</div>
  <div>A bit longer text</div>
  <div>OK</div>
</section>

Key Takeaways