flex-basis

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

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors