What Does Auto and Content Value of Flex-Basis Do

Question

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?

Accepted Answer

The only difference in the behavior of those two values is what they do when the width property is defined for the element.

Must Read

`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>

What Does Auto and Content Value of Flex-Basis Do

1 Answer

Must Read

`flex-basis: content`

Alexander Ross