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 Flexbox. Here you learn what Flexbox is, what it can do, and how it works. It’s true that Flexbox has a reputation for being difficult to learn, but here you’ll see that you can quickly get up to speed with Flexbox just by asking a few simple questions.
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: