首页 > 代码库 > Flexbox兼容性语法汇总
Flexbox兼容性语法汇总
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
Flexbox兼容性语法汇总
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。