Implementing Layouts with Flexbox and CSS Grid

We can now almost consider ourselves experts in the usage of CSS Grid. We’ve looked at many details, practiced many aspects of the tool, and learned about different approaches to creating grids and how to design them. As a result, we now know what we can achieve with CSS Grid.

However, CSS knows another versatile and powerful tool for building layouts: Flexbox. Since Flexbox was first announced – I still remember that day – people have used it to replace all kinds of hacks and fixes. From vertically centering icons (remember this gem to center something in its container? top: 50%; left: 50%; transform: translate (-50%, -50%); — I’m shuddering while writing this…) to building entire pages, everything was positioned, aligned, and moved with Flexbox. At some point, people started using Flexbox for things they probably shouldn’t have and for which CSS offers great alternative solutions, too...