CSS弹性布局

概念：可以实现类似浮动的效果，但是不会脱离文档流
语法：display:flex -------------设置一个弹性容器
主要属性（都需要先设置display:flex;）：

a) 设置弹性布局的方向--语法：flex-direction:值

(1) row横向排列，等同于左浮动浮动效果
(2) row-reverse 横向反向排列，等同于右浮动的效果
(3) column 纵向排列
(4) column-reverse 纵向反向排列，从下到上的排列

b) 设置 弹性布局是否换行，语法：flex-wrap:值

（1）不换行（默认），nowrap
（2）换行， wrap
（3）换行，并反向排列（从下往上排列），wrap-reverse------从下往上，从左往右进行排列

c) 设置弹性布局的水平对齐方式，语法：justify-content:值

（1）从左向右（左对齐），默认，flex-start
（2）从右往左排列（右对齐），flex-end
（3）两端对齐，中间等距离隔开，space-between
（4）两端的空白是中间空白的一半，space-around------------环绕对齐
（5）居中对齐，center

d) 垂直对齐方式，语法：align-content:值（在换行的时候用）

（1）默认的排列方式，stretch--------靠上排列，但是元素之间有间距
（2）靠上排列（上对齐），flex-start
（3）靠下排列（下对齐），flex-end
（4）垂直上下两端对齐，中间等距离空白，space-between
（5） 两端的空白是中间的空白的一半，space-around
（6）居中对齐，center
（7）等距离摆放，space-evenly

e) 交叉对齐方式，语法：align-items:值 ，需要横向排列

（1）flex-start，从起始位置对齐
（2）flex-end，在结束位置对齐--------底部对齐
（3）center，居中对齐---------垂直居中
（4）baseline，在基准线对齐
（5）stretch，拉伸子元素------图片不行

f)子元素单独在y轴上的对齐方式，语法：align-self:值

取值：

auto：默认值，元素继承了它的父容器的align-items属性，如果没有父容器则为"stretch"
stretch：拉伸
center：居中
flex-start：最上面
flex-end：最下面
baseline：容器的基线