CSS3 Flexible Box Layout Explained
The ﬂexible box layout module — or “ﬂexbox,” to use its popular nickname
— is an interesting part of the W3C Working Draft. The ﬂexbox speciﬁcation
is still a draft and subject to change, so keep your eyes on the W3C, but it is
part of a new arsenal of properties that will revolutionize how we lay out
pages. At least it will be when cross-browser support catches up.
In the meantime, we can experiment with ﬂexbox and even use it on
production websites where fallbacks will still render the page correctly. It
may be a little while until we consider it as mainstream as, say, border-
radius, but our job is to investigate new technologies and use them where
possible. That said, when it comes to something as fundamental as page
layout, we need to tread carefully.
e Display Property
So what is ﬂexbox, and why was it created? First, let’s look at how we
currently lay out pages and some of the problems with that model.
Until last year, most of us were using tables to lay out our pages. Okay,
maybe not last year! But I suspect that many of you reading this have been
guilty of relying on tables at some point in your career. At the same time, it
actually made a lot of sense. And let’s face it: it worked… to a point.
However, we all then faced the reality that tables were semantically dubious
and incredibly inﬂexible. And through the haze of this mark-up hangover, we
caught a glimpse of the future: the CSS box model. Hurray!
Smashing eBook #19│Mastering CSS3│ 150