Creating Multi-column Layouts Without Floats or Positioning

The flexible box layout model introduces a dedicated system for creating multi-column and multi-row layouts that works very differently than floats or absolute positioning. It’s easiest to see how the flexible box model works with real examples, so download the exercise files for this chapter at www.stunningcss3.com, and open the file flex-box_start.html in your code editor.

This page is the same bakery page from Chapter 6, but I’ve removed the media queries just to keep things simple for this example, and I’ve gotten rid of the CSS rules that created side-by-side columns. Each of the divs stacks vertically down the page, as do all block-level elements by default (Figure 7.1). We can use flexible box layout to make them display horizontally instead.