标签：
flexbox从第一次出现至今总共有三个语法版本，他们分别是：
| 规范版本 | IE | Opera | Firefox | Chrome | Safari |
| 标准版本 | IE 11 + | 12.10+ * | 20+ | 21+ ( -webkit- ) |
7.0(-webkit-) |
| 过渡版本 | 10 ( -ms- ) |
||||
| 老版本 | 3+ ( -moz- ) |
<21 ( -webkit- ) |
3+ ( -webkit- ) |
| 规范版本 | 属性名称 | 块级伸缩容器 | 内联伸缩容器 |
|---|---|---|---|
| 标准版本 | display |
flex |
inline-flex |
| 混合版本 | display |
flexbox |
inline-flexbox |
| 老版本 | display |
box |
inline-box |
| 规范版本 | 属性名称 | 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 | 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 |
| 规范版本 | 属性名称 | 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 | ||||||
| 规范版本 | 属性名称 | 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 | ||||||
PS:这个只有伸缩项目有多行时才生效，这种情况只有伸缩容器设置了flex-wrap为wrap时，并且没有足够的空间把伸缩项目放在同一行中。这个将对每一行起作用而不是每一个伸缩项目。
| 规范版本 | 属性名称 | 属性值 |
|---|---|---|
| 标准版本 | order |
|
| 混合版本 | flex-order |
<number> |
| 老版本 | box-ordinal-group |
<integer> |
| 规范版本 | 属性名称 | 属性值 |
|---|---|---|
| 标准版本 | flex |
none | [ <flex-grow> <flex-shrink> ? || <flex-basis> ] |
| 混合版本 | flex |
none | [ [ <pos-flex> <neg-flex> ? ] || <preferred-size> ] |
| 老版本 | box-flex |
<number> |
| 规范版本 | 属性名称 | 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 |
horizontalreverse |
verticalnormal |
verticalreverse |
| 规范版本 | 属性名称 | 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翻转，所以，如果伸缩项目在水平排列，伸缩项目翻转不会到一个新的线下面，他会翻转到一个新的线上面。（简单理解就是伸缩项目只是上下或前后翻转顺序）。
在写本文的时候，在Firefox中并不支持flex-wrap或者box-lines属笥。他不支持速记。
当前规范flex-flow是一个速记版本，他包括了换行flex-wrap和伸缩流flex-direction。在IE10中也支持这个版本规范。它目前还不支持Firefox浏览器，所以我建议避免使用它，仅使用flex-direction来指定伸缩流方向。
转载于 http://www.tuicool.com/articles/quQVv2
标签：
原文地址：http://www.cnblogs.com/WhiteCusp/p/4257398.html
