Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add flex-basis utilities #5671

Merged
merged 1 commit into from
Oct 4, 2021
Merged

Add flex-basis utilities #5671

merged 1 commit into from
Oct 4, 2021

Conversation

adamwathan
Copy link
Member

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
Copy link
Member

reinink commented Oct 2, 2021

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
Copy link

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

@maarekj
Copy link

maarekj commented Oct 2, 2021

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

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

@jshimkoski
Copy link

Would spacing include all of the following options:

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

@adamwathan
Copy link
Member Author

@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:

image

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?

@adamwathan adamwathan merged commit a2676b0 into master Oct 4, 2021
@adamwathan adamwathan deleted the flex-basis branch October 4, 2021 19:47
@jshimkoski
Copy link

jshimkoski commented Oct 4, 2021

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
Copy link

maurer2 commented Apr 6, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants