CSS flex-basis Property

What You’ll Learn

The flex-basis property sets the starting size of a flex item along the main axis before grow and shrink adjust the final layout. It is a key piece of the Flexbox sizing puzzle.

Introduction

The flex-basis property in CSS is used in the context of Flexbox layouts. It defines the initial main size of a flex item before any space distribution happens.

This property helps in determining the starting size of an item within a flex container, which can be different from the final size after the flexbox algorithm has been applied.

Definition and Usage

Apply flex-basis on direct children of a flex container. Use pixel values for fixed starting widths, percentages for proportional columns, and auto when you want content to determine the starting size. Pair it with flex-grow and flex-shrink (or the flex shorthand) for full control.

📝 Syntax

The syntax for the flex-basis property is simple and can be specified in various units such as pixels, percentages, or the keyword auto.

element {
  flex-basis: value;
}

Here, value can be a length value (e.g., px, em, rem), a percentage, or the keyword auto.

Basic Example

.sidebar {
  flex-basis: 200px;
}

Default Value

The default value of the flex-basis property is auto, which means the size of the flex item is based on its content.

Syntax Rules

• Only applies to flex items inside a flex container.
• In a row flex container, flex-basis sets the initial width; in a column container, it sets the initial height.
• When set, flex-basis overrides width (row) or height (column) as the starting main size.
• Final size may change after flex-grow and flex-shrink run.
• The property is not inherited.

💎 Property Values

flex-basis vs width

Examples Gallery

In this example, we’ll set the flex-basis of flex items to different values to see how it affects their initial size — plus a sidebar, percentage columns, and equal columns with flex-basis: 0.

<style>
  .container {
    display: flex;
    border: 1px solid #000;
    padding: 10px;
  }
  .item1 { flex-basis: 200px; }
  .item2 { flex-basis: 30%; }
  .item3 { flex-basis: auto; }
</style>

<div class="container">
  <div class="item item1">200px</div>
  <div class="item item2">30%</div>
  <div class="item item3">Auto</div>
</div>

.sidebar {
  flex-basis: 250px;
  flex-shrink: 0;
}

.col-small { flex-basis: 25%; }
.col-large { flex-basis: 75%; }

.column {
  flex-grow: 1;
  flex-basis: 0;
}

♿ Accessibility

• Avoid squeezing content too small — very small flex-basis values can make text unreadable on narrow screens.
• Test with zoom and large text — fixed pixel basis may not leave enough room for enlarged content.
• Use wrapping when needed — combine with flex-wrap: wrap on the container for mobile layouts.
• Keep logical source order — flex-basis changes size, not reading order.
• Do not hide content by setting basis to 0 without overflow handling — ensure content remains accessible.

💡 Best Practices