CSS flex-basis property

The flex-basis property is one of the properties used in CSS Flexbox to control the initial size of a flex item along the main axis before it starts to grow or shrink. It specifies the default size of a flex item, either in absolute units (e.g., pixels) or as a proportion of the available space.

The syntax of the flex-basis property is as follows:

flex-basis: <length> | <percentage> | auto;

• <length>: Sets the initial size of the flex item as an absolute length, such as pixels (px) or em units.
• <percentage>: Sets the initial size of the flex item as a percentage of the available space along the main axis.
• auto: The default value. The initial size of the flex item is based on its content and the width property if specified.

The flex-basis property is used together with the flex-grow and flex-shrink properties, which control how the flex item grows or shrinks to fill the available space if it is not using its initial size. The flex-grow property determines the ability of a flex item to grow relative to other flex items, while the flex-shrink property determines the ability of a flex item to shrink if there is not enough space.

Example:

.container {
  display: flex;
}

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

In this example, the .container is a flex container, and the .item elements are flex items. The flex-basis property is set to 200px, which means the initial size of each flex item will be 200px. The flex-grow property is set to 1, allowing the flex items to grow and distribute any extra available space evenly among them.

The flex-basis property is a powerful tool in Flexbox layouts, as it allows you to set the initial size of flex items and control their responsiveness and distribution within the flex container.