Learning Web Design, 6th Edition

Chapter 17. Getting in Line with Flexbox

17

Getting in Line with Flexbox

In this chapter

Flex containers and items

Flow direction and wrapping

Flex item alignment

Controlling item “flex”

So far, we’ve seen how to move elements around using text alignment, floats, and positioning. For decades those were our only options, and although we came up with hacks to make them do what we want, web designers were ready for a better solution. Enter the CSS Flexible Box Layout Module, or Flexbox for short.

Put simply, Flexbox is used for arranging elements into a row or column (see Note), but it also gives us more fine-tuned control over alignment and solves some of the frustrating limitations of our previous layout toolkit. One of the great marvels of the Flexbox model is that items resize, or flex to use the formal term, to fit the available space. That means it allows items to stretch or shrink inside their containers, preventing wasted space and overflow—a real plus for making layouts fit a variety of viewport sizes. Other advantages include the following:

• The ability to make all neighboring items the same height
• Easy horizontal and vertical centering (curiously elusive with old CSS methods)
• The ability to change the order in which items display, independent of their order in the source

  Note

  To arrange elements into rows and columns, there is CSS Grid Layout, which I’ll cover in Chapter 18, Grid Layout.

Flexbox is good for page elements that need to line up in some manner. Practical ...