Flexbox版本
flexbox从第一次出现至今总共有三个语法版本，他们分别是：
- "display:box;" — 2009年的老版本
- "display:flexbox;" — 2011年过渡版本/混合版本
- "display:flex;" — 标准版本
| 规范版本 |
IE |
Opera |
Firefox |
Chrome |
Safari |
| 标准版本 |
IE 11 + |
12.10+ * |
20+ |
21+ ( -webkit- ) |
7.0(-webkit-) |
| 过渡版本 |
10 ( -ms- ) |
|
|
|
|
| 老版本 |
|
|
3+ ( -moz- ) |
<21 ( -webkit- ) |
3+ ( -webkit- ) |
开启flexbox：让一个元素变成伸缩容器
| 规范版本 | 属性名称 | 块级伸缩容器 | 内联伸缩容器 |
|---|
| 标准版本 |
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