flex-basis

Published Jul 23, 2021Updated Aug 13, 2024

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

Syntax

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

to clipboardCopy to clipboard

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%

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;
}

to clipboardCopy to clipboard

The output of the above code block is shown below:

Image demonstrates the use of 200px flex-basis on #img_one alongside other images in the flex container with default properties.