Add flex-basis utilities

[adamwathan]

This PR adds new flex-basis utilities because why not. They look like basis-{value}, and by default I've included these values:

// ...
flexBasis: ({ theme }) => ({
  auto: 'auto',
  ...theme('spacing'),
  '1/2': '50%',
  '1/3': '33.333333%',
  '2/3': '66.666667%',
  '1/4': '25%',
  '2/4': '50%',
  '3/4': '75%',
  '1/5': '20%',
  '2/5': '40%',
  '3/5': '60%',
  '4/5': '80%',
  '1/6': '16.666667%',
  '2/6': '33.333333%',
  '3/6': '50%',
  '4/6': '66.666667%',
  '5/6': '83.333333%',
  '1/12': '8.333333%',
  '2/12': '16.666667%',
  '3/12': '25%',
  '4/12': '33.333333%',
  '5/12': '41.666667%',
  '6/12': '50%',
  '7/12': '58.333333%',
  '8/12': '66.666667%',
  '9/12': '75%',
  '10/12': '83.333333%',
  '11/12': '91.666667%',
  full: '100%',
}),
// ...

Makes me think flex-grow-{value} and flex-shrink-{value} should just be grow-{value} and shrink-{value}... 👀

[reinink]

Makes me think flex-grow-{value} and flex-shrink-{value} should just be grow-{value} and shrink-{value}... 👀

💯 Lets make that happen! (obviously aliasing the old ones)

[shrutibalasawebdev]

How about value 0? Zero is different from auto if I’m not wrong

[maarekj]

How about value 0? Zero is different from auto if I’m not wrong

I think that 0 is included in spacing. (none)

[jshimkoski]

Would spacing include all of the following options:

flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

[adamwathan]

@jshimkoski I did a bunch of testing and as far as I can tell those values don't actually have very good browser support, for example none of them work in Safari:

Not open to including the ones that work in most places but still struggling to get a clear answer on browser support 🤔 Any insights by any chance?

[jshimkoski]

No insight, just figured I’d point them out just in case you missed them.

For anyone else interested, it turns out that Firefox and Safari both have issues with Intrinsic & Extrinsic Sizing.

As an aside, I think your list of defaults is way more than adequate.

[maurer2]

Hello, it seems that the browser support for those properties has gotten much better in recent times (https://caniuse.com/?search=flex-basis%3A%20content). It might be worth adding them in the next version of tailwind.
I believe content, min-content, max-content for flex-basis would be useful when trying to force fixed width flex children to shrink to their min or max content size without having to resort to additional wrapper elements or css-grid via grid-flow-col, when one can't change the width of said children directly.
This could be done via the descendant selector on the flex parent, like so for example [&>*]:basis-max-content. Here are a few examples: https://play.tailwindcss.com/o42ScVuQHU

Cheers