fix handling of flex shorthand

[quantizor]

1. the flex spec doesn't allow values to be in reverse order
2. the default state of flexBasis should always be "auto"

Fixes styled-components/styled-components#1855

[jacobp100]

Thanks for the PR! I think it is currently spec compliant according to https://www.w3.org/TR/css-flexbox-1/#flex-property

The syntax is none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

The double bar means any order is permitted.

Then for the flex basis,

<‘flex-basis’>
...
When omitted from the flex shorthand, its specified value is 0.

Feel free to correct me if I'm wrong though!

Didn't notice RN supports flexBasis: 'auto' though. We could probably clean up the return value of flex: none and flex: auto

[quantizor]

See the MDN article, it’s quite detailed. And it disagrees with W3 that the default for flexBasis should be zero.

…

On Thu, Oct 18, 2018 at 3:20 AM Jacob Parker ***@***.***> wrote: I think it is currently spec compliant according to https://www.w3.org/TR/css-flexbox-1/#flex-property The syntax is none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] The double bar means any order is permitted. Then for the flex basis, <‘flex-basis’> ... When omitted from the flex shorthand, its specified value is 0. Feel free to correct me if I'm wrong though! Didn't notice RN supports flexBasis: 'auto' though. We could probably clean up the return value of flex: none and flex: auto — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#96 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1uaZSecyFz_wdvIpDEUMdG0qF5h3ks5umDnPgaJpZM4XseK4> .

[jacobp100]

Where abouts were you reading the the MDN article?

<'flex-basis'>
Defines the flex-basis of the flex item. Any value valid for width and height properties are accepted. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0 when omitted.

link

[quantizor]

Hmm ok I do see where you said that but the spec is at odds with itself. See this:

initial
This is the default value. The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto".

That implies the default should be auto unless otherwise changed. And I do believe that's what users would expect too.

[jacobp100]

So the initial value for flex-basis is auto.

When you use the flex shorthand, it always resets it, even if you don’t define it in the shorthand. The value it uses when you don’t define it is 0.

[quantizor]

Hmm ok. Well I'll close this and feel free to poach any of my changes for setting 'auto'

[jacobp100]

Done! #97