Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
.box{ display: flex; }
行内元素也可以使用Flex布局。
.box{display: inline-flex; /* 将对象作为内联块级弹性伸缩盒显示 */}
弹性盒模型用于决定元素在盒子里的分布方式以及如何处理盒子的可用空间。通过盒模型，设计师可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体的弹性布局
flex容器：采用 Flex 布局的元素的父元素；
flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（侧轴）（cross axis）。
主轴默认自左向右，侧轴默认自上而下。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex容器（采用 flex 布局的元素的父元素）属性
1、display:flex、inline-flex
弹性盒只针对第一级子元素生效
- flex：块级弹性盒
- inline-flex: 行内块级弹性盒
【注】设为flex 布局以后，子元素的float、clear和vertical-align属性将失效。
2、flex-direction属性 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
- row：自左向右的方向（默认值）
- row-reverse：翻转主轴水平方向的位置，即自右向左
- column：主轴为自上而下的方向
- column-reverse：主轴为自下而上的方向
3、flex-wrap属性，定义子元素是否换行显示
flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap：即使子元素内容超出父元素，也不会折行显示，会压缩子元素宽度，将它们都容下（默认值）
- wrap：超出的部分会从上到下折行显示
- wrap-reverse：超出的部分会从下到上折行显示
4、 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;
5、 justify-content属性 定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
-
flex-start：沿着主轴起点对齐
-
flex-end：沿着主轴终点对齐
-
center：在主轴终点对齐显示
-
space-between：沿着主轴两端对齐，中间的剩余空间将平分
-
space-around：沿着主轴在元素左右两边自动分配距离
-
space-evenly（非正式）：沿着主轴方向设置元素间空隙相等
6、align-items属性 定义项目在交叉轴上（侧轴）如何对齐。（行内垂直对齐方式）
align-items: flex-start | flex-end | center | baseline | stretch（默认值）;
- baseline: 沿着侧轴基线对齐
- stretch（默认值)：拉伸至同父元素一样高。默认情况下子元素不写宽高则宽度由内容撑开，而高度与父元素同高。若有两行或者更多则平分。
7、align-content属性 定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。（行与行之间垂直对齐方式）
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用
- stretch（默认值)：拉伸以适应父元素高度。默认情况下子元素不写宽高则宽度由内容撑开，而高度则平分。
