微信网站制作企业html5混合app开发

上一讲我们谈的是盒子的容器实行，今天我们来聊一聊弹性盒子的项目属性；

*******************（1）顺序属性

order属性，用于定义容器中项目的出现顺序。

顺序属性值，为整数，可以为负数，数字大小决定项目出现的先后顺序。

数字越小，排列越靠前，默认值为0。

****************************（2）长度属性

flex属性，是广义上的长度属性。它包含了项目的放大属性、缩小属性和初始长度属性。

！！！！！！flex-grow属性，用于定义容器中项目的相对放大比例。注意！在容器还有剩余空间时，项目才能体现出放大的效果。flex-grow的属性值默认为0，没有放大效果，会展示默认长度。

与之相反，容器空间不足时，我们就需要使用缩小属性，来对项目进行收缩。

通过缩小属性flex-shrink，定义了容器中项目的相对缩小比例。

flex-shrink的属性值默认为1，空间不足时，项目将缩小。

设置flex-shrink: 0;时，即使容器空间不足，也可以保证项目不被压缩。

flex-basis属性，用于定义容器中项目的初始长度。

当项目左右排列时，项目长度和宽度类似；

当项目上下排列时，项目长度和高度类似。

当项目左右排列时，若元素同时设置了flex-basis属性和width属性，flex-basis的优先级更高。

前面，我们依次学习了flex-grow、flex-shrink和flex-basis属性。

实际上，我们经常使用它们的简写形式 flex。

简写形式 flex的属性值依次为： flex-grow、flex-shrink、flex-basis。

在弹性布局时，我们经常会使用自适应布局。自适应布局会充分分配容器的尺寸，分为两种：

内敛的flex: 1;、霸道的flex: auto;。

flex: 1;等同于设置flex: 1 1 0%;。flex: 1;的尺寸表现更为内敛，当项目未设置宽度时，其会优先牺牲自己的尺寸。简单来说，一般在等分布局时使用。

flex: auto;等同于设置flex: 1 1 auto;。flex: auto;的尺寸表现更为霸道，当项目未设置宽度时，其会优先扩展自己的尺寸；简单来说，一般适合内容动态适配的布局。

******************************（3）单项目对齐属性。

单项目对齐属性align-self，和垂直对齐属性类似，用于设置项目在垂直方向的对齐方式。

不同的是，align-self，是为某个项目设置不同于其它项目的对齐方式。

单项目对齐属性align-self会覆盖垂直对齐属性align-items的值。