Hands-On UX Design for Developers

Flexbox-based layout

The CSS flexbox-based layout was first introduced in 2009, but it took almost 6 years, till 2015, to be fully supported by all of the latest major browsers.

Instead of using floats, with flexbox-based layout we can easily define the distribution of space across columns or rows.

When this approach to CSS layouts came into the game, finally developers didn't need to use any hacks or tricks to create specific layouts that were required by designers.

So, let's try to achieve the same thing that we did with float-based layout with the flexbox-based layout.

First, we will need to add an extra div to our HTML page to wrap all the three middle columns together into one, which will be the left sidebar, right sidebar, and the center ...