I am trying to dive deep into flexbox and was studying the flex-basis. Till now i understood that it is used to specify width or height of a flex item, depending on flex-direction is row or column. But I am not a able to get what do auto (it is the default value) value of flex-basis do?
And flex-basis also has one other value content. About this value, what MDN says is confusing me a lot.
Can i get clear explanation on what these two values (auto and content) exactly do?
1 Answer
The only difference in the behavior of those two values is what they do when the width property is defined for the element.
flex-basis: content
The "content" value will just set the width according to the element's content. It doesn't matter if you've defined a width for the element through the width property, it would be ignored.
ul { display: flex; list-style-type: none; } ul li { background-color: green; margin: 5px; width: 100px; flex-basis: content; }<html> <body> <ul> <li>Element</li> <li>Element</li> <li>Element</li> </ul> </body> </html>flex-basis: auto
The "auto" value verifies if the width property was defined. If so, that will be the element's width. If no, it will fall back to flex-basis: content.
ul { display: flex; list-style-type: none; } ul li { background-color: green; margin: 5px; width: 100px; flex-basis: auto; }<html> <body> <ul> <li>Element</li> <li>Element</li> <li>Element</li> </ul> </body> </html>
