August 2015
Beginner to intermediate
718 pages
20h 46m
English
Content preview from CSS: The Missing Manual, 4th EditionBecome an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
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 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.