Menu
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;
630
Now, when it comes to the property called flex-grow, the default is 0. That means the squares are not allowed to grow to take up the space in the container.
flex-basis: auto looks up the main size of the element and defines the size. For example, on a horizontal flex container, auto will look for width and height if the container axis is vertical. If no size is specified, auto will fall back to content .
By default, if you have a width set and did not declare a flex basis value, width will function normally on that element. There is no difference between how flex-basis: will function on your element and how width: will function on your element. Width will even obey flex-shrink when using Flexbox.
flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value. ... which in itself doesn't say much about the behavior of elements with flex-basis set.
"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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
