CSS Master

Flexboxisapproachingmaturityasaspecification.Thelatestversionsofmost

browsersnowsupportitspropertiesandvalueswithoutavendorprefix.

Beforewedigintoflexbox,here’saquickreviewofitshistory:theoriginal 2009

specificationwentthroughahugerewritein 2012 whereseveralpropertiesand

valueswererenamedandsomebehaviorswereadjusted.Andthenthespecification

wentthroughanotherrewritethatbroughtitveryclosetowhereitbegan.

Different browser vendors implemented the specification at different points, which

means that the browser landscape is fragmented. Safari ≤ 6, Android ≤ 4.3, and

UC Browser support the original 2009 versionoftheflexboxspecification.^15 Internet

Explorer 10 implementsthe 2012 version,detailsofwhichimplementationare

availablefromtheMicrosoftDeveloperNetwork.^16

Table4.3showscurrentbrowsersupportforflexbox.

Thefullhistoryoftheflexboxrewriteprocessisburiedintheannalsofthewww-

[email protected];however,thespecificationeditorTabAtkins

wrotetwoblogpoststhatexplainthedifferences.SeeAtkins’“Flexboxisdead,

longliveflexbox!”^17.

Table 4.3. Browser support for the current flexbox module specification

(Source: CanIUse.com^18 )

Internet Firefox Safari Chrome Opera Android

Explorer

12.1+ (versions 4.4+

15 and 16

require

-webkit-

prefix)

2 1+ (versions

28 require

-webkit-

prefix)

6.1+ (versions

9 require

-webkit-

prefix)

11 28+

(^15) http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#packing
(^16) https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx
(^17) http://www.xanthir.com/blog/b4Dm0
(^18) http://caniuse.com/#feat=flexbox
170 CSS Master