Take your JavaScript to the next level at Frontend Masters.
The flex-basis property is a sub-property of the Flexible Box Layout module. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero.
.element {
flex-basis: 100px;
}A flex-basis value set to auto sizes the element according to its size property (which can itself be the keyword auto, which sizes the element based on its contents).
Syntax
flex-basis: <number>Please note that as for any width, negative lengths are invalid.
Demo
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 11 | 12+ | 22+ | 22-28 1 29+ | 7-8 1 9+ | 12.1+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 1 9+ | 92+ | 90+ | 92+ | 12.1+ |
- 1 Supported with prefix
-webkit-
For more informations about how to mix syntaxes in order to get the best browser support, please refer to “Using Flexbox” and this article from DevOpera.
The article should maybe be updated to say that the spec recommends using the ‘flex’ shorthand over the ‘flex-basis’ longhand.
Flex-basis in detail + an example: https://codepen.io/slater101/full/OaZLWd
codepen demo doesn’t show flex-basis
It uses the
flexshorthand rule, the last value is forflex-basisand the demo has an explicit value set in em’s.Can anyone help me to solve this problem?
What exactly is the size property?
Hi there. Thanks for the article and this website in general. May I ask if this post is still usable now since it’s a bit old? Thanks.
Yep, everything here is relevant. You might also consider referring to the full flexbox guide for a complete overview of all the available flex properties with examples.
it is not made clear whether percentages values are allowed?
Does really flex-basis property set element’s width? Does not depend on flex-direction property?
I mean for flex-direction: column; flex basis specify element’s height and for flex-direction: row; it specify element’s width.
“When omitted from the flex shorthand, its specified value is the length zero.”
If I understand correctly, this refers to the default value of
flex-basisas0. If my understanding is accurate then this piece of information is incorrect.The default value of
flex-basisisautoHey Adrian! You’re absolutely correct: the initial value of
flex-basisisauto. But, as true to the article, it results in an initial value of0when it’s not specified in theflexshorthand property. The text you’re quoting there is actually pulled straight from the latest Editor’s Draft of the spec.The article does not explain the flex-basis property. There is only one example that is not sufficient.Please fully explain the property with details and more examples.
You can check this out in the meantime: https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/