Flex 0px vs auto



Hi there,
can anyone explain me the difference between this two rules please ?
flex: 1 0 0px
flex:1 0 auto


The third value in the flex shorthand property is flex-basis, auto is the default value for it, 0px doesn't make much sense.


It's the short hand version. In that notation, the first value is flex-grow, the second is flex-shrink and the last is flex-basis (or width)

A basic but solid guide can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

I just tested it because it didn't make sense to me either, and 0 (at least in Chrome) causes it to have no width, so it'll essentially word wrap after every space or break character (like the -)


When I test it doesn't seem to do anything, no different to it being auto. But still it does not make any sense to use that value, it's a non issue, if you are not wanting to set a flex-basis, you just leave it at its default and with grow on, it will expand anyway.


here https://css-tricks.com/almanac/properties/f/flex-basis/

The flex-basis property is a sub-property of the Flexible Box Layout module.

It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero.

A flex-basis value set to auto sizes the element according to its size property (which can itself be the keyword auto, which sizes the element based on its contents).

I've asked it aout of curiosity in the real world I think there is no valuable afaik


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.