简单比较Flexbox版本如下：
- 2009年版本（旧版本）：display:box;。
- 2011年版本（混合版本）：display:flexbox;。
- 2014年版本（新版本）：display:flex;。
具体说明如下：
浏览器支持状况
各主流浏览器对Flexbox规范不同版本的支持如表1所示。
表1 浏览器对规范版本的支持
| 规范版本 | IE | Opera | Firefox | Chrome | Safari |
|---|---|---|---|---|---|
| 新版本（标准版） | 11 | 12.10+ * | 22 | 29+、21–28 (-webkit-) | |
| 混合版 | 10 (-ms-) | ||||
| 老版本 | 3–21 (-moz-) | <21 (-webkit-) | 3–6 (-webkit-) |
开启Flexbox
不同Flexbox版本定义一个元素为伸缩容器的方法比较如表2所示。
表2 比较启动Flexbox
| 规范版本 | 属性名称 | 块伸缩容器 | 内联伸缩容器 |
|---|---|---|---|
| 新版本（标准版） | display | flex | inline-flex |
| 混合版 | display | flexbox | inline-flexbox |
| 老版本 | display | box | inline-box |
主轴对齐方式
不同Flexbox版本指定伸缩项目沿主轴对齐方式的取值比较如表3所示。
表3 比较主轴对齐方式
| 规范版本 | 属性名称 | start | center | end | justify | distribute |
|---|---|---|---|---|---|---|
| 新版本 （标准版） |
justify-content | flex-start | center | flex-end | space-between | space-around |
| 混合版 | flex-pack | start | center | end | justify | distribute |
| 老版本 | box-pack | start | center | end | justify | N/A |
【提示】
- start：开始位置。
- center：中间位置。
- end：结束位置。
- justify：两端对齐。
- distribute：均匀对齐。
- N/A：表示不适用的意思。
侧轴对齐方式
不同Flexbox版本指定伸缩项目沿侧轴对齐方式的取值比较如表4所示。
表4 比较侧轴对齐方式
| 规范版本 | 属性名称 | start | center | end | baseline | stretch |
|---|---|---|---|---|---|---|
| 新版本 （标准版） |
align-items | flex-start | center | flex-end | baseline | stretch |
| 混合版 | flex-align | start | center | end | baseline | stretch |
| 老版本 | box-align | start | center | end | baseline | stretch |
【提示】
- baseline：基线对齐。
- stretch：伸展对齐。
单个伸缩项目侧轴对齐方式
不同Flexbox版本指定单个伸缩项目沿侧轴对齐方式的取值比较如表5所示。
表5 比较单个伸缩项目侧轴对齐方式
| 规范版本 | 属性名称 | auto | start | center | end | baseline | stretch |
|---|---|---|---|---|---|---|---|
| 新版本 （标准版） |
align-self | auto | flex-start | center | flex-end | baseline | stretch |
| 混合版 | flex-item-align | auto | start | center | end | baseline | stretch |
| 老版本 | N/A | ||||||
伸缩项目行对齐方式
不同Flexbox版本指定伸缩项目行在侧轴的对齐方式的取值比较如表6所示。
表5 比较伸缩项目行对齐方式
| 规范版本 | 属性名称 | start | center | end | justify | distribute | stretch |
|---|---|---|---|---|---|---|---|
| 新版本 （标准版） |
align-content | flex-start | center | flex-end | space-between | space-around | stretch |
| 混合版 | flex-line-pack | start | center | end | justify | distribute | stretch |
| 老版本 | N/A | ||||||
【注意】
只有伸缩项目有多行时才生效，这种情况只有伸缩容器设置了flex-wrap为wrap时，并且没有足够的空间把伸缩项目放在同一行中。这个将对每一行起作用而不是每一个伸缩项目。
显示顺序
不同Flexbox版本指定伸缩项目的显示顺序的取值比较如表7所示。
表7 比较显示顺序
| 规范版本 | 属性名称 | 属性值 |
|---|---|---|
| 新版本（标准版） | order | <number> |
| 混合版 | flex-order | <number> |
| 老版本 | box-ordinal-group | <integer> |
伸缩性
不同Flexbox版本指定伸缩项目如何伸缩尺寸比较如表8所示。
表8 比较伸缩性
| 规范版本 | 属性名称 | 属性值 |
|---|---|---|
| 新版本（标准版） | flex | none | [ <flex-grow> <flex-shrink>? || <flex-basis>] |
| 混合版 | flex | none | [ [ <pos-flex> <neg-flex>? ] || <preferred-size> ] |
| 老版本 | box-flex | <number> |
flex属性在微软的草案与新标准或多或少不一样。主要区别在于：它们都转换成标准缩写版本，属性值为flex-grow、flex-shrink和flex-basis，值使用相同的方式在速记。然而，flex-shrink（以前称为负flex）的默认值为1。这意味着伸缩项目默认不能收缩。以前，空间不足使用flex-shrink比例来收缩伸缩项目，但现在可以在flex-basis的基础上配合flex-shrink来收缩伸缩项目。
伸缩流
不同Flexbox版本指定伸缩容器主轴的伸缩流方向比较如表9所示。
表9 比较伸缩流
| 规范版本 | 属性名称 | Horizontal | Reversed horizontal | Vertical | Reversed vertical |
|---|---|---|---|---|---|
| 新版本 （标准版） |
flex-direction | row | row-reverse | column | column-reverse |
| 混合版 | flex-direction | row | row-reverse | column | column-reverse |
| 老版本 | box-orient box-direction |
horizontal normal |
horizontal reverse |
vertical normal |
vertical reverse |
在旧版本规范中，使用box-direction属性设置为reverse和在新版本中设置row-reverse或column-reverse得到的效果相同。如果想要的效果是row或column，可以省略不设置，因为normal是默认的初始值。
当设置direction为reverse，主轴就翻转。例如，当使用“ltr”书写模式，指定row-reverse时，所有伸缩项目会从右向左排列。类似的，column-reverse将会使所有伸缩项目从下向上排列，来代替从上往下排列。
在老版本中，需要使用box-orient来设置书写模式的方向。当使用“ltr”模式时，horizontal可用在inline-axis，vertical可用在block-axis。如果使用的是一个自上而下的书写模式，如东亚传统的书写模式，这些值就会翻转。
换行
不同Flexbox版本指定伸缩项目是否沿着侧轴排列比较如表9所示。
表9 比较换行
| 规范版本 | 属性名称 | No wrapping | Wrapping | Reversed wrap |
|---|---|---|---|---|
| 新版本 （标准版） |
flex-wrap | nowrap | wrap | wrap-reverse |
| 混合版 | flex-wrap | nowrap | wrap | wrap-reverse |
| 老版本 | box-lines | single | multiple | N/A |
wrap-reverse让伸缩项目在侧轴上进行start和end翻转，所以，如果伸缩项目在水平排列，伸缩项目翻转不会到一个新的线下面，它会翻转到一个新的线上面。简单理解就是伸缩项目只是上下或前后翻转顺序。