CSS flex-basis

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

Syntax

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

Copy to clipboard
Copy 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%

Example

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

Copy to clipboard
Copy to clipboard

The output of the above code block is shown below: