The CSS flex-basis property specifies the initial main size of a flex item before the remaining space is distributed using Flexbox.

.item {
  flex-basis: 200px;
}

The value can be a length, percentage, auto, 0, or other valid sizing values.

When the flex direction is row, a length value such as 200px defines the initial width of the flex item.

.container {
  display: flex;
}

.item {
  flex-basis: 200px;
}

A percentage value defines the flex basis relative to the flex container’s inner main size.

.item {
  flex-basis: 50%;
}

With flex-basis: auto, Flexbox considers the item’s definite main size, such as width in a row layout, when determining its base size.

.item {
  width: 250px;
  flex-basis: auto;
}

Setting flex-basis: 0 tells Flexbox to start the flex sizing calculation from a zero basis, subject to the other sizing constraints.

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

flex-basis defines the starting point while flex-grow controls how an item receives positive free space.

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

When the container does not have enough space, flex-shrink can reduce items from their flex base size.

.item {
  flex-shrink: 1;
  flex-basis: 300px;
}

The flex shorthand combines flex-grow, flex-shrink, and flex-basis.

.item {
  flex: 1 1 250px;
}