flexbasis

Flex-basis is a property of the CSS Flexible Box Layout (Flexbox) that sets the initial size of a flex item along the main axis before any free-space distribution by flex-grow or flex-shrink occurs. In a row-oriented container, the main axis runs left to right; in a column-oriented container, it runs top to bottom. The flex-basis value determines the item’s base size that is used to calculate how much space the item should take up.

Values of flex-basis can be a length, a percentage, auto, or, in some browsers, the keyword content. A length or percentage gives a definite base size in the container’s main dimension. Auto means the base size is based on the item’s content and any size properties (such as width in a row or height in a column) in effect. The content keyword (supported in modern browsers) sizes the item to its intrinsic content size.

After the base sizes are determined, the container’s remaining or excess space is distributed among items according to their flex-grow and flex-shrink factors. Items with positive flex-grow values expand to fill free space; items with flex-shrink reduce their base size when space is tight. All sizing respects the item’s min-width, max-width, and related constraints, which can override the computed flex-basis under certain conditions.

Common usage patterns include setting flex-basis: 0 to create equal-width columns when combined with a positive flex-grow, or using flex-basis with content to size items to their content. Because min-width and other constraints affect final size, flex-basis is a key part of responsive layouts, allowing precise control over how flex items occupy horizontal or vertical space.