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

Question

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

Answers 1
Added at 2017-11-30 18:11
Tags
Question

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;

Answers to

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

nr: #1 dodano: 2017-11-30 18:11

"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.)

.f {display:flex}
.zero {flex-basis: 0}
.auto {flex-basis: auto}
<div class="f">
  <div class="auto">This is a child</div>
</div>

<div class="f">
  <div class="zero">This is a child</div>
</div>

Source Show
◀ Wstecz