CODEWITHSUNDEEP
htmlcssflexbox
Oti Na Nai
Oti Na Nai

Reputation: 1407

The difference between flex-basis auto and 0 (zero)

What is the difference between these two values? I've tested numerous examples and they just give the exact same result... Can someone please give me an example where flex-basis: auto; does not give the same result as flex-basis: 0;

Upvotes: 50

Views: 28771

Answers (2)

Kike Lebowski
Kike Lebowski

Reputation: 581

I think what usually causes confusion with all this (or at least it did for me) is the fact that the final result is modified if other flex properties are added. Often, when looking for examples on flex-basis, these examples get mixed up with other flex properties that are affecting the final result. For example, if we add a flex-grow:1 to the great example given by Daniel Beck. In both cases the final result is the same, since you are telling the boxes: "grow as much as you can until you occupy the available space".

.f {
  display: flex
}

.f div {
  border: 1px solid
}

.zero {
  flex-grow: 1;
  flex-basis: 0;
}

.auto {
  flex-grow: 1;
  flex-basis: auto
}
<div class="f">
  <div class="zero">This is flex-basis zero</div>
</div>

<div class="f">
  <div class="auto">This is flex-basis auto</div>
</div>

Upvotes: 4

Daniel Beck
Daniel Beck

Reputation: 21505

"0" and "auto" flex-basis will be different in most if not all situations: numeric values are interpreted as specific widths, so zero would be the same as specifying "width: 0" -- and thus will collapse the element to its smallest possible width given the content, or to zero itself if its overflow is hidden or the element is directly sizable (an image for example.)

.f {display:flex}
.f div {border:1px solid}
.zero {flex-basis: 0}
.auto {flex-basis: auto}
<div class="f">
  <div class="zero">This is flex-basis zero</div>
</div>

<div class="f">
  <div class="auto">This is flex-basis auto</div>
</div>

Upvotes: 60

Related Questions