Theupside,however,isthatthelatestversionsofallmajorbrowserssupportthe
latestversionoftheflexboxspecification.That’stheversionwe’llfocusonhere.^19
Abasicflexibleboxlayoutisverysimpletocreate:adddisplay: flexordisplay:
inline-flextothecontainingelement.Safari 8 andUCBrowser9.9dorequirea
vendorprefix.Inthosebrowsers,you’llneedtousedisplay: -webkit-flexor
display: -webkit-inline-flex.
Whenyouadddisplay: flexordisplay: inline-flextoacontainingelement,
itsimmediatechildrenbecomeflexitems,showninFigure4.34.Ifnootherproper-
tiesareset,eachflexitemwill:
■ havethesameheightasitstallestelement,and
■ stackhorizontallywithnospacebetweentheedgesofeachbox
Figure 4.34. A list with display: flex applied to the ul containing element (note how each child li stacks horizontally)
(^19) Ifyou’dlikeanintroductiontocross-browserflexboxthatincludesolderversionsofthespecification,
readChrisMills’piece,“Advancedcross-browserflexbox”
[https://dev.opera.com/articles/advanced-cross-browser-flexbox/].
Complex Layouts 171