Flex布局：容器属性、项目属性

6.16

Flex布局

容器属性

1、flex-derection:通过设置坐标轴来设置项目排列方向
   row: 默认值  水平向右
   row-reverse: 水平向左
   column: 垂直向下
   column-reverse: 垂直向上
2、flex-wrap:设置是否允许项目多行排列，以及多行排列时换行的方向
   wrap:换行
   nowrap:默认设置  不换行
   wrap-reverse:换行排列 换行排列为wrap时的反方向
3、justify-content:设置项目在主轴上的对齐方式，以及分配项目之间及其周围多余的空间
   flex-start: 默认
   center:项目居中
   flex-end:距离终点为0
   space-between:项目间间距相等，第一个项目距离主轴起点和最后一个项目离主轴终点距离为0
   space-around:第一个项目离主轴起点和最后一个项目离主轴终点距离为项目间距的一半
   space-evenly:项目间间距相等
4、align-items:设置项目在交叉轴的对齐方式
   stretch:(默认值)：项目拉伸至填满行高
   flex-start:距离起点为0
   center:项目居中
   flex-end:距离终点为0
5、align-content:多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间
   flex-start:首行在交叉轴起点开始排列，行间不留间距
   center:项目居中
   flex-end:距离终点为0
   space-between:项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0
   space-around:第一个项目离主轴起点和最后一个项目离主轴终点距离为项目间距的一半
   space-evenly:项目间间距相等
   

项目属性

1、order:设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数
  收缩因子默认值为：1
2、flex-shrink:当项目在主轴方向上溢出时，通过项目收缩因子来压缩项目适应容器
   扩张因子默认值为：0
3、flex-grow:当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配
4、align-self:设置项目在行中交叉轴方向上的对齐方式