The flex-basis property defines the initial size of a flex item before the remaining space is distributed. It acts as the starting point for the flex sizing algorithm.

The "Hypothetical" Size

Think of flex-basis as the "ideal" size of the element. If there is enough space in the container, the item will be this size. If not, it might shrink. If there is extra space, it might grow from this size.

Basis vs Width

When flex-direction is row, flex-basis controls the width. When flex-direction is column, it controls the height.

• auto: (Default) Looks at the item's width/height property. If those are auto, it looks at content size.
• content: Sizes based on the content inside.
• Length units (px, %, etc.): Sets a hard value, ignoring content size.

The Flex Shorthand

It is recommended to use the flex shorthand: flex: grow shrink basis.

For example, flex: 1 1 0 sets the basis to 0, forcing all items to start from nothing and share space equally regardless of their content. flex: 1 1 auto lets them start at their natural size, meaning larger content gets more space.

Best Practices

Use flex-basis: 0 (or flex: 1) for equal-width columns. Use flex-basis: auto when the content size matters. Avoid mixing width and flex-basis on the same element to prevent confusion.