HTML & CSS reference

flex-basis

The starting size of a flex item along the main axis, before free space is shared.

Syntax

flex-basis: value;

Values

Parameter	Type	Description
length	length	A size: `200px`, `10rem`.
%	percentage	A percentage of the container.
auto	keyword	Uses `width` (or `height` in a column), otherwise the content size (the default).

Examples

Different starting sizes:

<style>
  .row { display: flex; gap: 6px; }
  .row div { padding: 6px; background: peachpuff; }
</style>
 
<div class="row">
  <div style="flex-basis: 100px;">100px</div>
  <div style="flex-basis: 50%;">50%</div>
</div>

Notes

In a row flex-basis works like width, in a column like height. It is usually set through the flex shorthand.

Related recipes

How to stack columns on mobile

In the tutorial

Flex items — How to control individual items in flexbox — flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, order and margin auto.

Thanks for reading!