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

转载于:https://www.cnblogs.com/WhiteCusp/p/4257398.html

Flexbox兼容性语法汇总相关推荐

html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总，常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾本文主要介绍JS的跨浏览器兼容性 ...
Python的基本语法汇总
Python的基本语法汇总 1.常用列表的操作 2.常用字典的操作 3.文件基本操作 4.if/else三元表达符 5.生成器表达式(不占内存) 6.Python的while语句或者for语句可以带e ...
【ChatGPT】输出MySQL常用语法汇总
以下是MySQL常用的语法汇总: 创建数据库 CREATE DATABASE database_name; 删除数据库 DROP DATABASE database_name; 创建表 CREATE ...
《最值得收藏的python3语法汇总》之运算符
目录关于这个系列 1.算术运算符 2.比较(关系)运算符 3.赋值运算符 4.逻辑运算符 5.位运算符 6.成员运算符 7.身份运算符 ...
Markdown 语法汇总
Markdown语法汇总前言我们在平时写作的时候,可能你会倾向于使用 Markdown 这种富文本标记语言,因为它是纯文本格式,而且可以很方便的生成具有很强可读性的 html 文件.比如现在很多写 ...
日语助词か的语法汇总，请牢记
以下是日语助词"か"的语法汇总,包括了它的多种用法和语法点: 疑问句 "か"最基本的用法就是在句末表示疑问,用于询问对方是否同意.知道或能够回答问题.例如:&q ...
python编程语法大全-python语法汇总
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. splitstriplen()for variable in range ...
浏览器兼容性问题汇总及解决方案
最近一直在调测系统在各个浏览器的兼容性问题,真是让人抓狂啊,我最爱的Firefox竟然还是出问题最多的,好伤心--把碰到的问题和查到的一些资料总结一下写在这里,一方面方便自己以后使用,另一方面希望对遇 ...
最新总结：2021那些小众精巧的 Python 语法汇总
2020 年 python2 停止维护,公司代码规范也鼓励使用 python3.6+版本,而随着 Python 版本的不断更新,许多旧的语法在可读性与效率上都已经有更好的替代了.当然,大部分的重要特性 ...