flex-basis

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 23, 2021Updated Sep 3, 2021
Contribute to Docs

A property that defines the default size of a flex item.

Syntax

#item-a {
display: flex;
flex-basis: <flex-value>;
}

The <flex-value> can be any of the following:

  • Grid keyword ( some are not well supported ) : auto, max-content, min-content
  • Pixel value: 300px
  • Percent value: 25%

Example 1

An image that has a starting width of 200 pixels:

#img-gallery {
display: flex;
flex-flow: row wrap;
}
#img-one {
display: flex;
flex-basis: 200px;
}

All contributors

Looking to contribute?

Learn CSS on Codecademy