CSS propertyFlexbox

flex-basis

Sets a flex item’s starting size on the main axis, before it grows or shrinks.

Initial value: auto
Inherited: No
Animatable: yes, as a length or percentage
Applies to: flex items
JavaScript: element.style.flexBasis = "200px"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.columns > * {
  flex: 1 1 180px;
}

Preview

Definition and usage

The flex-basis property defines the starting point for an item’s size on the main axis. Every item first gets its base size, and only afterward is any free or missing space distributed according to flex-grow and flex-shrink.

With auto, an item looks at its width (or height in a column), and if that isn’t set, at the size of its content. The value 0 means starting from zero, so with an equal flex-grow the items end up exactly the same size.

In a container with flex-direction: column, flex-basis applies to the height, not the width.

Syntax

flex-basis: auto | content | <length> | <percentage>;

Values

auto
The starting point is the content, so items end up with different widths.
0
All items start from zero, so with an equal grow value they’re equally wide.
100px
<length>
Every item starts at 100px and shares the rest of the space.
50%
<percentage>
The base size is half the container, so the items have to shrink.

Value	Type	Description
auto		The starting point is the content, so items end up with different widths.
0		All items start from zero, so with an equal grow value they’re equally wide.
100px	<length>	Every item starts at 100px and shares the rest of the space.
50%	<percentage>	The base size is half the container, so the items have to shrink.

Values in practice

auto

The starting point is the content, so items end up with different widths.

.demo .box { flex-basis: auto; }

All items start from zero, so with an equal grow value they’re equally wide.

.demo .box { flex-basis: 0; }

100px

Every item starts at 100px and shares the rest of the space.

.demo .box { flex-basis: 100px; }

50%

The base size is half the container, so the items have to shrink.

.demo .box { flex-basis: 50%; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

flex: 1 1 200px is a simple way to get columns that wrap once things get too narrow.
When you set both width and flex-basis, flex-basis takes priority (except for the value auto).

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course