分享一个FlexBox标准及兼容写法速查表-tutorial css-php.cn

分享一个FlexBox标准及兼容写法速查表

高洛峰

Lepaskan： 2017-03-16 11:02:32

asal

1244 orang telah melayarinya

FlexBox标准写法:

支持浏览器: IE11, Chrome29+, FireFox 20+, Safari加前缀 -webkit-

概述:

总的来说就是12个属性;

关于容器的6个,5个单一属性,分别定义了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一个简写属性, 方向,行

关于容器内元素的6个, 5个单一属性, 分别定义元素的顺序, 伸展, 收缩, 初始尺寸, 对齐, 和一个简写属性描述元素尺寸

container : display: flex \| inline-flex;	说明
flex-direction: row \| column \| row-reverse \| column-reverse	元素在容器内的排列方向
flex-wrap: nowrap \| wrap \| wrap-reverse	元素一行或多行显示
flex-flow: default:	上面两个属性的简写
justify-content: flex-start \| flex-end \| center \| space-between \| space-around	水平方向上, 元素在容器内的分布
align-items: stretch \| flex-start \| flex-end \| center \| baseline	垂直方向上, 元素在容器内的分布
align-content: stretch \| flex-start \| flex-end \| center \| space-between \| space-around	在容器内, 额外的空白部分的分布
Container items :
order: 0	元素在容器内的排列顺序
align-self: auto \| flex-start \| flex-end \| center \| baseline \| stretch	覆盖align-items的值, 定义自身在垂直方向上的分布
flex-grow: 0	元素在容器内所占空间的伸展
flex-shrink: 1	元素在容器内所占空间的收缩
flex-basis: auto	初始化时, 元素在容器内的尺寸
flex: <0 1 auto>	上面三个属性的简写

*以上不支持负值;

*每个属性的第一个取值为默认值;

*蓝色为多个属性简写模式;

兼容IE10:加前缀 -ms-

display:-ms-flexbox \| -ms-inline-flexbox;	standard (橙色为item属性)
-ms-flex-direction : row \| column \| row-reverse \| column-reverse	flex-direction
-ms-flex-wrap : none \| wrap \| wrap-reverse	flex-wrap
不支持	flex-flow
-ms-flex-pack : start \| end \|center \| justify	justify-content
-ms-flex-align : stretch \| start \| end \|center \| baseline	align-items
-ms-flex-line-pack : start \| end \|center \| baseline	align-content
-ms-flex-order :	order
-ms-flex-item-align : stretch \| start \| end \|center \| baseline	align-self
-ms-flex : \|\| none	flex : 0 0 auto

*IE10之前不建议使用,可以尝试用display:table;

关于Chrome,FireFox旧版本支持:

FireFox:把 -webkit- 换成 -moz- 即可

container : display: -webkit-flexbox \| -webkit-inline-flexbox;	standard (橙色为item属性)
-webkit-box-direction: normal \| reverse -webkit-box-orient: horizontal \| vertical	flex-direction
不支持	flex-wrap
不支持	flex-flow
-webkit-box-pack: flex-start \| flex-end \| center \| space-between \| space-around	justify-content
不支持	align-content
-webkit-box-align: stretch \| flex-start \| flex-end \| center \| baseline	align-items
-webkit-box-ordinal-group:	order
-webkit-box-flex: 1	flex-grow
-webkit-flex-shrink: 0	flex-shrink
-webkit-flex-basis: auto (无-moz-)	flex-basis
-webkit-box: <1 0 auto>	flex
不支持	align-self

Atas ialah kandungan terperinci 分享一个FlexBox标准及兼容写法速查表. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!