flex-basis

flex-basis sets the starting size used by the flex sizing algorithm along the main axis. It is not necessarily the final size: growth, shrinking, and min/max constraints follow.

Different bases without flexibility

These items do not grow or shrink, so their 80px and 140px bases remain visible. The main axis is horizontal in this row and writing mode.

<div class="row">
  <div class="small">80px</div>
  <div class="large">140px</div>
</div>

.row {
  display: flex;
  gap: 0.5rem;
}
.row > div {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 0;
  background: #dbeafe;
}
.small {
  flex-basis: 80px;
}
.large {
  flex-basis: 140px;
}

Wrapping cards with a starting size

Each card starts at 12rem but may grow to use its line’s free space. At a narrow width, wrapping moves cards to new lines.

<div class="cards">
  <article>
    <h2>Read</h2>
    <p>Inspect the code.</p>
  </article>
  <article>
    <h2>Try</h2>
    <p>Change a value.</p>
  </article>
</div>

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.cards > article {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 1rem;
  box-sizing: border-box;
  background: #eff6ff;
}
h2 {
  font-size: 1rem;
  margin-top: 0;
}

Values and prerequisites

The initial value is auto and flex-basis is not inherited. Auto uses the corresponding main-size property, width or height; when that is also auto, content-based sizing applies. Content asks for content-based sizing directly. Lengths, percentages, and intrinsic sizing keywords are also available; check individual newer values in the compatibility table.

A percentage basis resolves against the flex container’s inner main size. If that size is indefinite, the used basis can become content-based. A length zero and a percentage zero are therefore not always equivalent.

Common mistakes

The property belongs on a flex item, not an ordinary box. A non-auto basis takes precedence over the corresponding width/height for the starting size. In column direction it affects the vertical main size in horizontal writing. Site-specific utility spacing is not a reliable way to teach a native 16rem basis; use the actual declaration. Learn flex for coherent sizing shorthand.

Sources and browser support

MDN: flex-basis describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.