1. css
  2. /properties
  3. /flex-basis

flex-basis

Definition

The flex-basis property in CSS specifies the initial size of a flex item, before any free space is distributed according to the flex-grow and flex-shrink properties. It determines the size of an element along the main axis of a flex container.

Examples

Set the flex-basis property to a fixed value:

.flex-item {
  flex-basis: 200px;
}

Set the flex-basis property to a percentage value:

.flex-item {
  flex-basis: 50%;
}

Set the flex-basis property to the value of the element's width:

.flex-item {
  flex-basis: auto;
}

Values

ValueDescription
<width>A fixed width value in pixels, ems, rems, or any other CSS length unit.
<percentage>A percentage value relative to the size of the flex container.
autoThe flex-basis property takes the value of the element's width or height, depending on the flex-direction.
inheritUse the value of the parent element.

Best Practices

  • Use flex-basis in conjunction with flex-grow and flex-shrink to control the size of flex items.
  • If the flex-basis value is set to auto, it will take the value of the element's width or height, depending on the flex-direction.
  • Consider using CSS frameworks like Bootstrap or Foundation to manage the layout of your site, which often include built-in styles for flexbox.
  • Make sure to provide a meaningful fallback for browsers that do not support the flex-basis property.
  • Keep in mind that the value of flex-basis affects the final size of the flex item along the main axis of the flex container.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes