CODEWITHSUNDEEP
cssflexbox
Aditya Singh
Aditya Singh

Reputation: 678

What does auto and content value of flex-basis do

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?

Upvotes: 1

Views: 2213

Answers (1)

user11229156
user11229156

Reputation:

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>

Upvotes: 5

Related Questions