Flex-弹性布局

首先父容器设置弹性盒子：display：flex；

1.flex-direction设置主轴方向
row:默认值 主轴从左到右；
column:主轴从上到下；
row-reverse:主轴从右到左；
column-reverse:主轴从下到上；
2.设置子项是否换行：flex-wrap:wrap
nowrap:默认值
wrap:会换行
wrap-reverse:倒着换行

3.设置主轴上的对齐方式（针对于单行的对齐方式）：justify-content:center;
flex-start:主轴开始的位置排序
flex-end:主轴结束的位置开始
center：居中
space-around平均分布， 每一个项目两侧有相同的留白空间，两端子项距离父边框的距离 = 子项之间的距离/2
space-between：项目均匀分布，第一项在起点线，最后一项在终点线
space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等

4设置交叉轴上的对齐方式（单行对齐）：align-items:stretch
stretch:默认值 要想有效果，让子项没有设置高度
flex-start:项目按交叉轴起点线对齐
center：交叉轴方向项目中间对齐
flex-end：项目按交叉轴终点线对齐
baseline:保证子项的文本基线统一

5.align-content
align-content属性定义了在交叉轴方向的对齐方式及额外空间分配，类似于主轴上justify-content的作用
stretch (缺省)：拉伸显示
flex-start：从启点线开始顺序排列
flex-end：相对终点线顺序排列
center：居中排列
space-between：项目均匀分布，第一项在启点线，最后一项在终点线
space-around：项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和


6.flex: flex-grow flex-basis flex-shrink;
flex-grow: 当一行的主轴方向有空余空间的情况下，按照设置好的比例，分配剩余空间;土地扩桩 默认值0，则不参与瓜分
flex-basis:效果等同于width,权重值高于width,在js打印出来的宽度也是这个
flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。0表示不缩小，负值无效。
orders：设置子项的排列顺序 数值越小越靠前，默认值0
align-self 设置子项在交叉轴上的对齐方式,如果给父级也设置了交叉轴上的对齐方式，单行情况听自己的，多行情况下，要有团队意识，听父亲的
项的具体宽度（内容区的实际宽度）： shink + … = 得到一个总的权重值
每一个shink占得权重总数的比例 * 溢出的宽度 = 实际压缩的数据