12 Creating Page Layouts with Flexbox
Flexbox is the first CSS layout technique that works for the modern web. —Paddi MacDonnell
This chapter covers
- Understanding how flexbox works
- Learning the techniques for working with flexbox containers and items
- Putting flexbox to good use with real-world ideas
- Building the holy grail layout with flexbox
In Chapter 11, you saw that floats and inline blocks can get the job done, but not without running into problems, quirks, and workarounds such as clearing floats, creating faux columns, and avoiding whitespace. Even with all that, these layout strategies can't accomplish one of the features of the holy-grail layout: displaying the footer at the bottom of the screen if the page content doesn't fill the screen height.
This chapter's layout strategy prevents all these quirks, solves the footer problem, and has the fresh-faced appeal of a modern technology. I'm talking about flexbox, and before you can start using it for layout, you need to understand what it is and how it works. The next few sections explain everything you need to know.
Understanding Flexbox
Flexbox is the welcome shorthand for this method's cumbersome official moniker: Flexible Box Layout Module. The underlying principle behind flexbox is to provide a way around the rigid, cumbersome way that the browser handles blocks of content. The default is to stack them. Consider the following collection of div elements: