CSS3 Pushing the Limits

Chapter 10

Flexible Box Layout

At this point, things get really interesting. The Flexible Box Layout module, or Flexbox, is along with Grid Layout the most comprehensive of the new layout modules, offering an entirely new layout mode designed for assembling more complex web pages and applications.

Having said that, most of the layout concepts that CSS currently struggles with are far from complex; they're actually extremely basic demands, such as vertical centering, for example, that have traditionally relied on substantial yet fragile hacks to be achieved.

Well, at long last, Flexbox provides trivial solutions that reflect the elementary nature of these concepts, in addition to tackling the more challenging aspects of layout such as flexibility and distribution of space.

For me, this is one of the most exciting modules of all that CSS3 has to offer. The upcoming Regions and Exclusions modules will probably win the “wow factor” awards, but Flexbox addresses many everyday issues and genuinely has the potential to truly revolutionize the way you lay out your web pages.

At a time when the industry is adapting to the shift away from fixed-width layouts and responding to the realization that the web has no bounds, the introduction of Flexbox is a timely addition, and couldn't be more appropriate for the direction the web is heading.

I won't sugarcoat it: This module can be daunting and comes across as pretty complex at first glance, but I can assure you that once you've wrapped your ...