CSS: The Missing Manual, 4th Edition

Chapter 17. Modern Web Layout with Flexbox

Designers have used a number of different techniques for laying out web pages during the short life of the Web. At first, they relied on HTML tables to organize content into rows and columns. Since the HTML <table> tag was never intended for page layout, though, designers found creative (and complicated) ways to use the <table> tag to achieve the designs they wanted.

Later, CSS and float-based layouts (like the type described in Chapter 13) provided a simpler, more logical way to control page design. Float-based layouts are still the most common type, and designers continue to refine their use. For example, the simple grid system you learned in the previous chapter is a sophisticated tool for creating layouts, but it still uses floats to make the magic happen.

However, the Web is always evolving, and the CSS Working Group at the W3C is working on new ways to give designers flexible and powerful CSS-layout properties. One of the newer methods that also has fairly broad browser support is flexbox.

Introducing Flexbox

Flexbox adds another layout mode to CSS. You’ve already read about block-level and inline-block level (Inline, Block, and Other Display Settings) elements. Tables and positioned elements (How Positioning Properties Work) are also CSS layout modes. Flexbox, short for flexible box, adds another layout mode called flex layout.

Flexbox provides a very useful set of properties that let you lay out items in a row without floating them or ...