Web Design Playground, Second Edition

12 Creating Page Layouts with Flexbox

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 HTML5 offers a long list of page elements, from header to footer, and from article to aside. These elements have only semantic value, however, meaning that they don’t perform any actual layout duties. To get your web pages laid out the way you want, you need to break out of the web browser’s default page flow using the modern and powerful layout technologies of Flexbox and Grid.

You learn all about Grid in Chapter 13, but in this chapter, the focus is squarely on ...