Flex Basis

flex-basis sets the initial size of a flex item before any growing or shrinking happens. Think of it as the "starting point" for an item's size along the main axis. It works a lot like width, but it is specifically designed for flexbox layouts.

How It Works

By default, flex-basis is set to auto, which means the item uses its content size as the starting point. You can also set it to a specific value like 200px or 20%.

.container {
  display: flex;
}

.item {
  flex-basis: 200px;
}
    

Each item starts at 200px. If there is extra space, it will grow (if flex-grow allows it). If there is not enough space, it will shrink. The flex-basis is the anchor point for all of that negotiation.

Basis vs Width

You might wonder: why not just use width? The difference is that flex-basis interacts with flex-grow and flex-shrink. Width is a fixed instruction. Flex-basis is more like a suggestion that flexbox can override based on available space.

/* These behave differently */
.item-a {
  width: 200px;
  flex-grow: 1;
}

.item-b {
  flex-basis: 200px;
  flex-grow: 1;
}
    

In practice, when flex-basis is set, it takes priority over width. Most developers just use flex-basis in flex layouts to keep things consistent.

The flex Shorthand Recap

The flex shorthand combines grow, shrink, and basis in one declaration: flex: grow shrink basis. For example, flex: 1 1 0 means "start at zero size, grow equally, and shrink equally." This is one of the most common flex patterns you will see in codebases.

.item {
  flex: 1 1 0;
}
    

When basis is 0, each item starts with no intrinsic size and they all share space purely based on their grow values. This gives you the most even distribution.