HTML and CSS Reference
In-Depth Information
Chapter 22
What Next?
The previous 21 chapters have covered aspects of CSS that are widely implemented by most—if not all—browsers.
But the development of CSS3 proceeds apace. In this final chapter, I plan to look at features looming on the
horizon as this topic went to press in the second half of 2012. One of the most promising is the Flexible Box Layout
module (
http://dev.w3.org/csswg/css3-flexbox/
), which introduces a new layout mode called
flex layout
.
This solves many common layout problems, such as equal-height columns, and evenly distributing elements both
vertically and horizontally. It also allows you to display elements in a different order from the underlying HTML.
Firefox and WebKit-based browsers began work on flex layout many years ago, but the specification
underwent several changes before it eventually stabilized in August 2012. At the time of this writing, Chrome 21
is the only browser that supports what should be the final syntax (with a browser-specific prefix). However, other
browsers are sure to follow suit fairly quickly.
The bulk of this chapter is devoted to understanding the intricacies of flex layout, but I'll also take a brief
look at other features that are on the horizon for CSS3 and beyond.
In this chapter, you'll learn how to do the following:
•
Create a flex container
•
Control the direction of rows and columns inside a flex container
•
Display items in a different order from the underlying HTML
•
Adjust the way free space is filled by flex items
•
Align rows, columns, and individual flex items
•
Build a three-column flex container and reorder its contents
Flexible Box Layout
The main characteristic of flexible box layout is that it creates a block known as a
flex container
, where the flow of
the document can be literally turned on its head. Everything inside the flex container becomes a
flex item
, which
can be displayed in a different order from the underlying HTML. Margins also behave differently inside a flex
container, allowing you to distribute elements evenly or separate them into groups aligned on opposite sides.
Figure
22-1
shows flex layout in action. Notice that the three columns are all of equal height, and that the
Buy
Now
buttons are aligned at the bottom of each column even though there's a different amount of text in each one.
Previously, this type of layout could be achieved only using an HTML table.
