欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-19 11:42:52
...
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标准及兼容写法速查表的详细内容,更多请关注其它相关文章!

相关标签: CSS3 FlexBox