Layout
flex-basis
flex-basis goes on a flex item and sets its base size (its width, in a row) before leftover space is shared out by flex-grow or overflow is taken off by flex-shrink.
Syntax
content | <'width'>Preview
Code
.box {
display: flex;
}
.box > :nth-child(2) {
flex-basis: 50%;
}Controls
About
Values
auto: uses the item'swidth(orheightin a column). This is the initial value. If width is alsoauto, the size comes from the content.content: the size of the content, whatever the width.- Lengths and percentages: that width. Percentages are of the width of the container's content.
min-content,max-contentandfit-content: mean the same as forwidth.
The preview on this page makes the box display: flex with a helper declaration and puts flex-basis on the second item only (.box > :nth-child(2) is a selector for the second child of the box). Every item is 3em wide, and only the outlined item 2 changes its base size. With auto it uses the 3em width; with content it is as wide as its number.
How it differs from width
On a flex item, any flex-basis other than auto wins over width. In a flex-direction: column container it takes the place of height. Either way, the size can then grow with flex-grow or shrink with flex-shrink, so it is not always the final width. min-width and max-width are stronger than flex-basis and keep the width within their range even after growing or shrinking.
The flex shorthand
It is usually written with flex-grow and flex-shrink in the flex shorthand. flex: 1 sets flex-basis to 0%, so all of the space is shared in the ratio of flex-grow and the items get equal widths whatever their content. flex: auto sets flex-basis to auto, so items with more content end up wider.
Not covered on this page
stretch is not covered by the controls on this page yet, but you can type it into the code. It makes the base size fill the width of the container. Chrome and Edge (138 and later) and Safari (27 and later) support it; Firefox does not yet.