Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 7. Flexing Your Layout Muscles > Creating Multi-column Layouts Without ...

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.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint