2.1 KiB
title
| title |
|---|
| Flex Basis Property |
Flex Basis
flex-basis property defines the size of the flex-item along the main axis of the flex container. The main axis is horizontal if flex-direction is set to row and it'll be vertical if the flex-direction property is set to column.
Syntax
flex-basis: auto | content | <width> | <height>;
flex-basis: auto
flex-basis: auto looks up the main size of the element and defines the size. For example, on a horizontal flex container, auto will look for width and height if the container axis is vertical.
If no size is specified, auto will fall back to content.
flex-basis: content
flex-basis: content resolves the size based on the element's content, unless width or height is set through normal box-sizing.
In both the cases where flex-basis is either auto or content, if main size is specified, that size will take priority.
flex-basis:
This is just as specifying width or height, but only more flexible. flex-basis: 20em; will set the initial size of the element to 20em. Its final size will be based on available space, flex-grow multiple and flex-shrink multiple.
The specification suggests use of flex shorthand property. This helps write flex-basis along with flex-grow and flex-shrink properties.
Examples
Here is rows of individual flex containers and individual flex elements showing how flex-basis affects the box-sizing.
When the flex-direction is column, the same flex-basis will control the height property. An example below,
More Information:
Additional references on following pages:
- CSS specification level 1
- Mozilla Developer Network page on flex-basis