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 more flexbox utilities #391

Merged
merged 7 commits into from
Sep 12, 2020
Merged

Add more flexbox utilities #391

merged 7 commits into from
Sep 12, 2020

Conversation

sebnitu
Copy link
Owner

@sebnitu sebnitu commented Sep 11, 2020

Problem

With the addition of flex-gap and gap utilities, it's a good idea to start adding the rest of the missing flex utilities.

Solution

This PR introduces a few more flexbox utilities along with order, grow and shrink variables to better control the variant output. New utilities include:

  • flex-direction-[key] - Applies a flex direction property with the provided key as the value.
  • flex-wrap-reverse - Applies the flex-wrap property with the value of wrap-reverse.
  • flex-order-[key] - Applies the order property with the provided key as the value.
  • flex-basis-[key] - Applies the flex-basis property with the provided key (0 || auto) as the value.
  • flex-self-[key] - Applies the align-self property with the provided key as the value.

Fixes #375

@sebnitu sebnitu marked this pull request as ready for review September 12, 2020 19:20
@sebnitu sebnitu changed the title Add more flex utilities Add more flexbox utilities Sep 12, 2020
@sebnitu sebnitu merged commit e8dcd5b into master Sep 12, 2020
@sebnitu sebnitu deleted the add-more-flex-utilities branch September 12, 2020 19:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add missing flex utilities
1 participant