15
Flexible box layout
That web pages look as good as they do is
a minor miracle (comparatively speaking,
of course!). Since the move away from table-
based layouts to pure CSS, developers have oftenhad to create complex page structures using simple
tools such as float, margin, and position—tools perhaps not even intended
for that purpose when they were first created. As CSS has matured and
browsers have grown more powerful, a new range of alternative layout
approaches has been proposed.
The one most widely implemented is called Flexible Box Layout (or
Flexbox). This approach is defined in the Flexible Box Layout Module (http://
http://www.w3.org/TR/css-flexbox-1/),,) and it makes elements resize flexibly to better
fit their available space, without the need for floats, positioning, or complex
calculations.
Although you can certainly create entire page layouts with Flexbox, it is
most suitable for working with interface elements and smaller components.
When working with whole page layouts, consider using the Grid Layout
Module, which I’ll introduce in Chapter 17. But if you’re building a user
interface or an app (especially an app with a lot of buttons, form elements,
or interactive regions), you’ll find Flexbox extremely useful.
PX3024