CSS flex-basis Property: Set the Initial Size of a Flex Item

Defines the initial size of a flex item before the container distributes any remaining space. It works like width or height depending on the flex-direction.

Quick example

.flex-item {
  flex-basis: 300px;
  flex-grow: 1;
} /* starts at 300px, then grows to fill space */

Syntax

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

auto

Default. Uses the item's width (or height in column containers) if set, otherwise falls back to content size.

<length>

Fixed size like 200px or 10rem. The item starts at that size before flex-grow and flex-shrink apply.

<percentage>

Percentage of the flex container's main size.

0

Base size is zero. Useful when you want flex-grow to distribute space without content size interfering.

content

Sizes to the content of the item, ignoring any declared width or height.

Quick facts

Initial value

auto

Inherited

Applies to

Flex items and in-flow pseudo-elements

Animation type

length, percentage, or calc()

Examples

Equal columns that ignore content size

.columns > * {
  flex-basis: 0;
  flex-grow: 1;
}

Start every item at size 0, then let flex-grow distribute space equally. All columns end up the same width regardless of their content.

Fixed starting size with room to grow

.card {
  flex-basis: 240px;
  flex-grow: 1;
}

Card starts at 240px. If the container has extra space, the card grows. If there is not enough space, multiple cards in a row can wrap.

Size to content explicitly

.tag {
  flex-basis: content;
}

Forces the item to size based on its content even if width is set. Less common, but useful for overriding inherited widths.

flex-basis Browser Support

Widely available Since 2015 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

29+

22+

12+

Common pitfalls

auto is not the same as 0

With flex-basis: auto (the default), flex-grow distributes only what is left after each item's natural size. With flex-basis: 0, all space is up for grabs, so flex-grow ratios produce true equal or proportional widths. Use 0 for predictable layouts.

flex: 1 changes flex-basis to 0

The shorthand flex: 1 expands to flex: 1 1 0%. Writing flex-grow: 1 on its own keeps flex-basis at auto, which gives different space distribution. Reach for flex: 1 when you want equal share behavior.

width can override flex-basis

When flex-basis is auto, the item falls back to its width (or height). If you set both flex-basis and width, flex-basis wins on the main axis, but this confuses many developers. Set one or the other, not both.