day18—Flex弹性布局详解（二）

转行学开发，代码100天——2018-04-03

2.6 align-content属性

align-content 属性定义了在交叉轴方向对齐方式和额外空间分配，类似于justify-content的作用。

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

3.flex项目属性

3.1 order 属性

order 属性定义项目在容器中的先后顺序

order:1;

3.2 flex-grow属性

flex-grow 属性定义项目的放大比例，其值是一个单位的正整数，表示放大的比例，默认为0。

flex-grow:2;

3.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1,负值无效。

flex-shrink:2;

3.4 flex-basis 属性

flex-basis属性定义了项目在分配额外空间之前的缺省尺寸。属性值可以是长度（20%）或者auto。

flex-basis:auto;

3.5 flex 属性

flex是flex-grow flex-shrink flex-basis的简写，默认为0 1 auto；后两个属性可选属性。

flex:none;

3.6  align-self 属性

align-self属性定义项目的对齐方式。默认值是auto，即继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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