一、Flex 布局是什么？
1、Flex布局是W3C于2009年提出的一种弹性布局，可简便、完整、响应式地实现各种页面布局。现在市场上的所有浏览器都支持Flex布局。
2、Flex是flexible box的缩写，是“弹性布局”，用来为盒状模型提供最大的灵活性。
3、任何一个容器都可指定为Flex布局
div{ display:flex;}
行内元素也可以使用flex布局
div{display:inline-flex;}
webkit内核的浏览器，必须加上-webkit前缀
div{display:-webkit-flex; /*Safari*/ display:flex;}
4、设为flex布局后，子元素设置的float 、clear、vertical-align属性将失效。
二、Flex 基本概念
采用flex布局的元素，称为flex容器，简称为“容器”。他的所有子元素自动成为容器的成员，成为flex项目（flex item），简称“项目”。
Flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，主轴的结束位置叫做main end；
交叉轴的开始位置叫做cross start，交叉轴的结束位置叫做cross end。
默认沿着主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
三、Flex容器的属性
1、flex-direction 属性表示容器内元素的排列方向（默认为横向排列）
flex-direction:row; 沿水平(主轴)方向从左到右
flex-direction:row-reverse; 沿水平(主轴)方向从右向左
flex-direction:column； 沿垂直(交叉轴)方向从上向下
flex-direction:column-reverse; 沿垂直(交叉轴)方向从下向上
2、flex-wrap属性表示容器内元素的换行/拆行与否（默认不换行）；在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.
flex-wrap:nowrap; 默认值，不换行或不拆列
flex-wrap:wrap; 可以拆行或拆列（第一个行在上方）
flex-wrap:wrap-reverse; 拆行或拆列，以相反的顺序进行拆行或拆列（第一行在下方）
flex-wrap:initial; 设置该属性为它的默认值
flex-wrap:inherit; 从父元素继承该属性
3、flex-flow属性是flex-direction和flex-wrap属性的复合属性；在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.该属性可以用于设置或检索弹性盒模型对象的子元素排列方式。如果元素不是弹性盒对象的元素，则flex-flow元素将不会起作用。
flex-flow:<flex-direction>\\< flex-wrap>;
flex-flow:row nowrap; 默认值，沿水平主轴方向从左向右排列 不换行不换列；
flex-flow:initial; 设置该属性为它的默认值；
flex-flow:inherit; 从父元素继承该属性。
4、flex-grow属性用于设置或检索弹性盒子的扩展比率，如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.默认值为0。
实例：让第二个元素的宽度为其他元素的三倍：
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
语法：flex-grow: number|initial|inherit; （number为一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。）
5、flex-shrink属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
语法：flex-shrink: number|initial|inherit; （number是一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。）
6、flex-basis属性用于设置或检索弹性盒伸缩基准值，在支持它的浏览器下需要加上前缀，如-webkit、-ms、-moz.如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。默认值为auto。
实例：设置第二个弹性盒元素的初始长度为 80 像素：
div:nth-of-type(2) {flex-basis: 80px;}
语法：flex-basis: number|auto|initial|inherit; （number可以是一个长度单位或者一个百分比，规定灵活项目的初始长度。）
7、justify-content属性定义了项目在主轴上的对齐方式。，
justify-content:flex-start; （默认值）左对齐
justify-content:flex-end; 右对齐
justify-content:center; 居中
justify-content:space-between; 两端对齐，项目之间的间隔都相等。
justify-content:space-around; 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5、align-items属性定义项目在交叉轴上如何对齐。
align-items:flex-start; 交叉轴的起点对齐
align-items:flex-end; 交叉轴的终点对齐。
align-items:center; 交叉轴的中点对齐。
align-items:baseline; 项目的第一行文字的基线对齐。
align-items:stretch; (默认值）如果项目未设置高度或设为auto，将占满整个容器的高度。
6、align-content性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content:flex-start; 与交叉轴的起点对齐。
align-content:flex-end; 与交叉轴的终点对齐。
align-content:center; 与交叉轴的中点对齐。
align-content:space-between; 与交叉轴两端对齐，轴线之间的间隔平均分布。
align-content:space-around; 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
align-content:stretch; （默认值）轴线占满整个交叉轴。
7、order属性定义了项目的排列顺序。数值越小，排列越靠前，默认为0。
order:<integer>;
8、align-seft属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-seft:auto;
align-seft:flex-start;
align-seft:flex-end;
align-seft:center;
align-seft:baseline;
align-seft:stretch;
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。