`flex-basis` suggests a flex item’s starting size before Flexbox shares extra space or squeezes items to fit. Think of it as the item’s opening bid, not its final size: `flex-grow` can make it larger, and `flex-shrink` can make it smaller. section 12.4
The size follows the main axis. In a row, `flex-basis` suggests a width; in a column, it suggests a height. Without a declared size, an item may begin at the minimum size needed for its content, which can be too small or refuse to shrink past that content. section 12.4
item {
flex-basis: value|auto|content;
}
Use a measurement, `auto`, or `content` to choose the starting size. section 12.4
The available values have distinct jobs:
- A measurement such as `10em`, `300px`, or a percentage suggests that width or height. section 12.4
- `auto` uses the item’s `width` or `height`; it is the default and acts like `content` when neither size is declared. section 12.4
- `content` bases the initial size on the item’s contents. section 12.4
A row item with room to negotiate
For a row-based container, `flex-basis: 10em` gives an item a suggested starting width. It may still grow when room is available or shrink when space gets tight, according to its other flex settings. For a column-based container, the same property instead suggests starting height. section 12.4 section 12.4
`flex-basis` also appears inside the `flex` shorthand alongside `flex-grow` and `flex-shrink`. Use it when an item needs a sensible starting size rather than letting its contents call all the shots. section 12.4 section 12.7
