Menu
I have been reading MDN article on flex-basis css property. There I don't see any definition of flex-basis: auto. It explains about flex-basis: content. Seems like content has now replaced auto. But if that's the case, then why is auto still the initial value?
704
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 .
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.
The flex-basis property can be applied only to flex-items and width property can be applied to all. When using flex property, all the three properties of flex-items i.e, flex-row, flex-shrink and flex-basis can be combined into one declaration, but using width, doing the same thing would require multiple lines of code.
By default, if you have a width set and did not declare a flex basis value, width will function normally on that element. There is no difference between how flex-basis: will function on your element and how width: will function on your element. Width will even obey flex-shrink when using Flexbox.
The MDN article seems to have been updated since this question was originally asked. In short:
auto means "look at my width or height property".content means "look at my content".This does result in slight differences when the element has a fixed width or height. You will notice this difference if you view this live demo ONLY in Firefox (The value content is ONLY supported in Firefox at the time of this writing).
Also to quote historical notes from the same MDN article:
- Originally, flex-basis:auto meant "look at my width or height property".
- Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword. It was implemented in bug 1032922.
- Then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword).
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
