WeChatCode-Flex布局⑥

Ⅰ容器属性

1.flex-direction:【row/row-reverse/column/colmn-reverse】设置项目排列方向
2.flex-wrap:【nowrap/wrap/wrap-reverse】设置项目是否多行显示及多行显示时换行的方向
3.justify-content:【flex-start/center/flex-end/space-between/space-around/space-evenly】设置项目在主轴上的对齐方式及项目之间的空间配置
4.align-content:【stretch/flex-start/flex-end/center/space-between/space-around/space-evenly】多行排列时，设置项目在交叉轴方向上的对齐方式及项目之间的空间配置
5.align-items:【stretch/flex-start/flex-end/center/baseline】设置项目在行中的对齐方式

Ⅱ项目属性

1.order：设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数。
2.flex-shrink：当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数。
3.flex-grow：当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。
4.flex-basis：当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。当容器设置flex-direction为column或column-reverse时，flex-basis和height同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height属性。当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。
5.flex：flex-grow，flex-shrink，flex-basis的简写方式。值设置为none，等价于0 0 auto。值设置为auto，等价于1 1 auto。
6.align-self：设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，这么做可以对项目的对齐方式做特殊处理。默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。