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.