Frontend development lets you use the same markup in different ways to get a different look with CSS. Today we’re sharing with you a neat Pen (on CodePen) – jakob-e demonstrates 46 ways you can use the same markup with Flexbox. Please welcome!
So, what do we know about Flexbox? Flexbox is a single-direction layout concept. When working with flexbox you need to think in terms of two axes: the main axis and the cross axis. The main axis is defined by the
flex-direction property, and the cross axis runs perpendicular to it.
And a remarkable thing about Flexbox! We would like to show you one example, of how to use the same markup with Flexbox in 46 ways of CSS. Take a look at it here. Isn’t it amazing?
Unlike other CSS methods not intended for building layouts, Flexbox is a powerful tool focused on this goal, and you should take advantage of it. Flexbox layouts can make our sites and apps more flexible and resilient.
There are many things to know about Flexbox, so make sure to use The Complete Guide to Flexbox for reference.
There’s a bunch of great tools and hacks we shared with you about CSS on our blog. How do you know which one to use? Let’s compare CSS Grid vs Flexbox. Stay with us!