FlexBox标准及兼容写法速查表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了FlexBox标准及兼容写法速查表相关的知识，希望对你有一定的参考价值。
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: <flex-direction> <flex-wrap> default: <row nowrap>
|
上面两个属性的简写
|
|
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: <number> 0
|
元素在容器内的排列顺序
|
|
align-self: auto | flex-start | flex-end | center | baseline | stretch
|
覆盖align-items的值, 定义自身在垂直方向上的分布
|
|
flex-grow: <number> 0
|
元素在容器内所占空间的伸展
|
|
flex-shrink: <number> 1
|
元素在容器内所占空间的收缩
|
|
flex-basis: <width> auto
|
初始化时, 元素在容器内的尺寸
|
|
flex: <flex-grow> <flex-shrink> <flex-basis> <0 1 auto>
|
上面三个属性的简写
|
*以上<number>不支持负值;
*每个属性的第一个取值为默认值;
*蓝色为多个属性简写模式;
兼容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 : <number>
|
order
|
|
-ms-flex-item-align : stretch | start | end |center | baseline
|
align-self
|
|
-ms-flex : <positive-flex> <negative-flex> <preferred-size> || 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:<number>
|
order
|
|
-webkit-box-flex: <number> 1
|
flex-grow
|
|
-webkit-flex-shrink: <number> 0
|
flex-shrink
|
|
-webkit-flex-basis: <width> auto (无-moz-)
|
flex-basis
|
|
-webkit-box: <flex-grow> <flex-shrink> <flex-basis> <1 0 auto>
|
flex
|
|
不支持
|
align-self
|
参考:
兼容多浏览器的预定义写法:
以上是关于FlexBox标准及兼容写法速查表的主要内容，如果未能解决你的问题，请参考以下文章