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

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