61. Flex Item Property: flex-basis

flex-basis defines the initial size of a flex item before the remaining space is distributed based on flex-grow and flex-shrink.

How Flex Basis Works

• flex-basis takes a length unit (px, em, rem, %). Default is auto (the browser uses the item's width or height property, or the content size).
• If flex-basis is set, it overrides any explicit width or height definition along the main axis.

Example: Setting a Starting Point

If you want four items to start at 200px each, and then share any extra space equally:

css .item { flex-basis: 200px; /* Initial size is 200px / flex-grow: 1; / Share remaining space equally / flex-shrink: 1; / Allow shrinking if needed */ }

Relationship to Width

When using Flexbox, prefer flex-basis over width for defining the main dimension (width if row, height if column). If both flex-basis and width are defined, flex-basis takes precedence along the main axis.