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


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


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

Learn CSS on Codecademy