Write cleaner Flexbox with these 4 shorthands.
Why write 3 lines… When one will do the trick?
Flexbox has powerful shorthand properties that reduce clutter and make your CSS easier to read and maintain.
Here, I’ve condensed: row-gap + column-gap → gap: row col flex-grow + flex-shrink + flex-basis → flex: 1 1 0 (or just flex: 1) align-content + justify-content → place-content flex-direction + flex-wrap → flex-flow
These shorthands do exactly the same thing, just smarter and more scalable.
Pro tip: If you’re building reusable components or utility classes, using shorthands is a great way to reduce CSS bloat.
I’m working on an ebook called “You Don’t Need JavaScript”.
To get notified when it launches 👉 https://theosoti.com/you-dont-need-js/