Flexible Box Layout 197
center, space-between, and space-around—and also adds stretch, which resizes
the items to fill all unused space. Figure 15-14 compares the effects of the
values center and space-between.
Figure 15-14: Alignment on the cross axis when flex items are wrapped
is controlled with align-content: center (top) and space-between (bottom).
Transitions and Animations: Browser Support
As I write this, Flexbox is well implemented across all major modern brows-
ers, but it has a long history of syntax changes, and supporting a handful
of older browsers can be troublesome. For example, Internet Explorer 10
implements an earlier version of the spec, which uses the -ms- prefix for all
properties. The IE10 implementation and the modern spec have a few key
differences: IE10 uses -ms-flexbox as the name of the value for the display
property, rather than flex; and -ms-flex-align and -ms-flex-pack are used
rather than align-items and justify-content (their values differ a little, too).
IE10 also lacks any implementation of flex-wrap or the flex-flow shorthand.
If you need to support IE10, I suggest reading all about the differences from
the spec in the IE10 Developer Guide (http://msdn.microsoft.com/en-us/library/
ie/hh673531%28v=vs.85%29.aspx).
Older versions of WebKit-based browsers, especially Safari 6 and below,
use an even more outdated syntax. If you really need to support these older
browsers fully, see Stephen Hay’s introductory article from 2009 (http ://
http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/).
But don’t let these concerns put you off from using Flexbox. Only a
handful of browsers require these older properties, and with a little extra
work, you can take advantage of the layout gains that Flexbox brings.
