Web Design Playground

Chapter 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 ...