CSS flex-basis Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The flex-basis property defines the initial main size of a flex item that the flex layout algorithm uses as its starting point before distributing free space. It establishes the baseline measurement against which the container decides whether an item should grow or shrink; because this baseline is measured along the container’s main axis, the effective dimension can correspond to the item’s width or height depending on the container’s orientation. Think of it as the “intended” size the algorithm begins with, rather than the final size after flexible adjustments.

That baseline interacts directly with an item’s growth and shrink behavior: the flex-grow factor determines how remaining positive free space is apportioned relative to each item’s base size, while the flex-shrink factor controls how items contract when the container has less space than the sum of their bases. The flex shorthand commonly sets these behaviors together, but an explicit base provided via flex-basis will be the reference used by the algorithm for that item.

In layout scenarios where an item already has an explicit main-size (for example a set width), that dimension can serve as the starting point unless a different base is specified; however, final computed sizes are still subject to constraints such as min-width, which can prevent items from shrinking below or growing above certain limits. Using flex-basis gives you fine-grained control over how items enter the flexing process, enabling predictable distribution of space and clearer relationships between fixed sizing intent and flexible behavior.

Definition

Initial value: auto
Applies to: Flex items, including in-flow pseudo-elements
Inherited: No
Computed value: As specified, but with relative lengths converted into absolute lengths
Animatable: Yes
JavaScript syntax: object.style.flexBasis

Interactive Demo

flex-basis: auto;

flex-basis: 0;

flex-basis: 200px;

Item 1

Item 2

Item 3

Syntax

flex-basis: auto | <size>

Values

autoIndicates auto size based on the content of the item.
<size>Specifies the size of the element in px, mm, pt or in percent along the main axis. In this case, the size is calculated relative to the parent. A negative value is not valid.

Example

HTML

<div class="wrapper">

  <h2>Flex-basis examples</h2>

  <p class="note">Resize the window to see how flex-basis affects item sizes.</p>

  <div class="flex-container">

    <div class="item item-a">A<br><small>flex-basis: 150px</small></div>

    <div class="item item-b">B<br><small>flex-basis: 30%</small></div>

    <div class="item item-c">C<br><small>flex-basis: auto (flex-grow: 1)</small></div>

    <div class="item item-d">D<br><small>flex-basis: 80px</small></div>

  </div>

</div>

CSS

/* Base */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f3f6fb;
  padding: 24px;
  color: #0f172a;
}

/* Wrapper */
.wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* Note */
.note {
  margin: 8px 0 16px;
  color: #334155;
}

/* Flex container */
.flex-container {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e6eef8;
  align-items: center;
}

/* Items */
.item {
  padding: 16px 12px;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  text-align: center;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item small {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.9;
  margin-top: 6px;
  color: rgba(255,255,255,0.9);
}

/* Demonstrate flex-basis */
.item-a {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  flex-basis: 150px;
  flex-shrink: 0;
}

.item-b {
  background: linear-gradient(135deg, #ef4444, #f97316);
  flex-basis: 30%;
  flex-shrink: 0;
}

.item-c {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  flex-basis: auto;
  flex-grow: 1;
}

.item-d {
  background: linear-gradient(135deg, #2563eb, #8b5cf6);
  flex-basis: 80px;
  flex-shrink: 0;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS flex-basis property. Hover over a browser icon to see the version that first introduced support for this CSS property.