CSS-弹性布局3-伸缩属性

5、项目的属性

属性值	说明
order	该属性定义项目的排列顺序，数值越小，排序越靠前，默认为0
flex-grow	该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink	该属性定义了项目的缩写比例，默认为1，记如果容器空间不足，则该项目将缩小
flex-basis	该属性定义了在分配多余空间之前，项目占据的主轴空间，默认为auto，即项目本来的大小
flex	该属性是flex-grow, flex-shrink, flex-basis的简写。
align-self	该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

5.1 order

5.2 flex-grow

该属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
（1）如果所有项目的flex-grow均为1，那么所有的项目将均分容器的剩余空间。
（2）如果一个项目的flex-grow为2，其他为1的话，为2的这个项目分配到的剩余空间是其他项目的2倍。

5.2 flex-shrink

该属性定义了项目的缩写比例，默认为1，记如果容器空间不足，则该项目将缩小。
（1）如果所有的项目的flex-shrink均为1，那么所有项目将等比缩小。
（2）如果某一个项目的flex-shrink为0，则该项目不会被缩小。

5.3 flex-basis

该属性定义了在分配多余空间之前，项目占据的主轴空间，默认为auto，即项目本来的大小.

5.4 flex

该属性是flex-grow, flex-shrink, flex-basis的简写。

5.5 align-self

该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。