CSS弹性盒

flex定义和用法

flex：none | [ flex-growflex属性在CSS新弹性盒模型中是比较常用的，本文将带你深入理解flex属性的各个方面，包括它的语法、取值、作用和浏览器兼容性。flex-grow ] || [ flex-shrink ] || [ flex-basis ]

默认值：看各分拆属性

适用于：弹性盒模型容器子元素

继承性：无

flex属性值

none：

none关键字的计算值为: 0 0 auto

[ flex-grow ]：

定义弹性盒子元素的扩展比率。

[ flex-shrink ]：

定义弹性盒子元素的收缩比率。

[ flex-basis ]：

定义弹性盒子元素的默认基准值。

order定义和用法

order：<integer>order属性在CSS新弹性盒模型中是比较常用的，本文将带你深入理解order属性的各个方面，包括它的语法、取值、作用和浏览器兼容性。

默认值：0

适用于：弹性盒模型容器子元素

继承性：无

order属性值

<integer>：

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

order说明

设置或检索弹性盒模型对象的子元素出現的順序。

对应的脚本特性为order。

flex-flow定义和用法

flex-flow：[ flex-direction ] || [ flex-wrap ]

默认值：看各分拆属性

适用于：弹性盒模型容器

继承性：无

flex-flow属性值

[ flex-direction ]：

定义弹性盒子元素的排列方向。

[ flex-wrap ]：

定义弹性盒子元素溢出父容器时是否换行。

flex-flow说明

复合属性。设置或检索弹性盒模型对象的子元素排列方式。

对应的脚本特性为flexFlow。

align-content定义和用法

align-content：flex-start | flex-end | center | space-between | space-around | stretch

默认值：stretch

适用于：多行的弹性盒模型容器

继承性：无

align-content说明

设置或检索弹性盒堆叠伸缩行的对齐方式。

对应的脚本特性为alignContent。

align-items定义和用法

align-items：flex-start | flex-end | center | baseline | stretch

默认值：stretch

适用于：弹性盒模型容器

继承性：无

align-items说明

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

对应的脚本特性为alignItems。

align-self定义和用法

align-self：auto | flex-start | flex-end | center | baseline | stretch

默认值：auto

适用于：弹性盒模型子元素

继承性：无

align-self说明

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

对应的脚本特性为alignItems。

justify-content定义和用法

justify-content：flex-start | flex-end | center | space-between | space-around

默认值：flex-start

适用于：弹性盒模型容器

继承性：无

justify-content说明

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。

对应的脚本特性为justifyContent。