flex 弹性布局

  原理 ：通过给父盒子添加flex属性来控制滋子盒子得位置和排列方式

常见父项属性：

（1）flex-direction:设置主轴方向

（2）justify-content:设置主轴子元素排列方式

（3）flex-wrap:设置子元素是否换行

（4）align-content:设置侧轴上得子元素得排列方式（多行）

（5）align-items:设置侧轴上得子元素排列方式（单行）

（6）flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

1.主轴的方向（row row-reverse column column-reverse）

主轴

默认主轴的方向是x轴方向，水平向右

侧轴

默认侧轴的方向是y轴方向，垂直向下

2.justify-content主轴上的对其方式(只随着主轴变)

属性：

flex-start 默认从头开始，如果主轴是x，则从左到右

flex-end 从尾部开始排列

center 在主轴居中对齐（如果主轴是x轴则水平居中）

space-around 平分剩余空间

space-between 先两边贴边 再平分剩余空间（重要）

3.flex-wrap（子元素是否换行，flex布局中，默认的子元素不换行 ）

flex-wrap:nowrap 不换行

flex-wrap:wrap 换行

4.align-items（单行）

拉伸：align-items:stretch （注意，子盒子不要给高度）

5.align-content（多行）

在flex-wrap:wrap 条件下

align-content:flex-start

align-content:flex-end

align-content:center //所有盒子整体居中

align-content:space-between //上下贴边

align-content:sapce-around //距离上沿一段距离，下沿一段距离

6.总结align-content 和align-items的区别

align-items 适用于（单行）情况下，只有上对齐，下对齐，居中和拉伸

align-content 适用于（多行）的情况下（单行情况下无效）可以设置上对齐，下对齐，居中和拉伸，平均分配剩余空间等属性

单行找anlign-items 多行找align-content

align-items与align-content都是对侧轴进行使用的