弹性布局：
flexsible Box
属性：display：flex; inline-flex;
注意：float,clear,vertical-align;失效
1、 概念：采用flex布局的元素变成flex容器（flex container）,子元素，flex项目（flex itme）;
子元素的排列方向：main axsis: 主轴（x轴） cross axsis：交叉轴(y轴)；
容器属性：
设置在容器上用于统一控制子元素
1、 flex-direction:
作用：主轴方向上项目的排列方式：
取值：1、row（水平——从左往右）
2、row-reverse (水平——从右往左)
3、column (从上到下)
4、column-reverse(从下向上)
2、flex-wrap:
作用：解决一行内显示不完时，如何换行
1、 wrap：换行
2、 nowrap：不换行，默认把项目给等比缩放
3、 wrap-reverse:换行，把第一行放到最下面
3、flex-flow:
作用：是 flex-direction和flex-wrap综合属性；
值： 1、默认 row nowrap;
2、自己设置的；
4、 justify-content:
作用：定义主轴上项目的排列方式
值：1、flex-start:项目按照主轴的起点对齐
2、 flex-end: 项目按照主轴的终点对齐
3、 center：居中
4、 space-between：每两个项目两侧之间的间隙一样
5、 space-around:两端对齐，项目两两之间间隙相同并且是项目与边框间隙的两倍；
5、align-items
作用：定义项目在交叉轴上的排列方式
注意：主要是针对一行的项目
值： 1、flex-start:
2、flex-end:
3、center：
4、baseline：（基线）第一行文本的基线对其
5、stretch: 默认项目没设置高度或auto,会将项目占满整个容器；
6、 align-content:
作用：针对容器有多根轴线（自动换行）的对项目排列方式的一个控制
1、 flex-start: 交叉轴起点对齐
2、 flex-end:
3、 center:
4、 space-between: 交叉轴两端对齐
5、 space-around：
项目属性：
1、order:排序
作用：定义项目的排列顺序
值：整数数, 特点：数字越小，越靠前
1、 默认值：0
2、 自定义：
2、flex-grow:
作用：放大比例 如果当前排列轴（）有空余空间，项目就会有按比例放大的一个现象：
取值：正整数；
条件：1）只有一个元素取值为1，占满剩余空间；
2）多个元素取值为1，他们平分剩余的空间；
3、flex-shrink:
作用：该属性定义了项目缩小得比例，默认值为1；
取值：正整数；
条件： 1、取值为0，空间不足时项目缩小
2、取值为1，空间不足时候等比缩小
4、flex-basis:
作用：指定项目占据的空间大小
取值： 1、auto，默认值项目的本身；
2、length:指定的是宽和高（取决于容器选择的轴线；）
5、flex:
作用： flex-grow，flex-shrink，flex-basis综合属性；
值：1、自定义；
2：auto（能够自由的拉伸-
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
）
3：none(
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
);
6、align-self（）
作用：单独设置元素在交叉轴上的与其他元素不一样的排列方式；
注意:项目使用该属性时，align-items属性将会失效
取值：1、auto:继承父元素属性
2、flex-start:
3、flex-end;
4、center;
5、baseline：
6、stretch;