2009年，W3C提出了一种新的布局方式：Flex布局。
使用Flex布局可以简便，完整，响应式地实现各种页面布局，目前得到了大部分现代浏览器的支持。
一，基本概念：
采用Flex布局的元素，称为Flex容器（flex container），所有Flex容器子元素自动成为Flex容器成员，也可以称作Flex项目（flex item）。
下面是结构示意图：
从上图可以看到Flex容器有两条轴，分别是水平方向主轴（main axis）和垂直方向交叉轴（cross axis）。
main start | main end：主轴开始|结束位置
cross start | cross end：交叉轴开始|结束位置
main size | cross size：单个Flex子元素占据主轴/交叉轴空间
二，Flex容器
在Flex容器上有6个属性，分别是：
1，flex-direction：row（默认） | row-reverse | column | column-reverse
设置Flex容器主轴的方向，有四个值：
row（默认）：主轴水平方向，从左到右
row-reverse：主轴水平方向，从右到左
column：主轴垂直方向，从上到下
column-reverse：主轴垂直方向，从下到上
2，flex-wrap：no-wrap（默认）| wrap | wrap-reverse
设置Flex容器子元素的换行情况，
no-wrap（默认）：不换行
默认情况下图片排成一行或者一列，假如Flex容器主轴方向是水平方向，修改修改图片宽度。
wrap：换行，上对齐
wrap-reverse：换行，镜像，下对齐
3，flex-flow：row no-wrap；
flex-flow是flew-direction和flex-wrap的缩写，默认值是row no-wrap；
4，justify-content：start | end | flex-start（默认） | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first-baseline | last baseline
定义Flex子元素在主轴上的对齐方式。
flex-start：左对齐
flex-end：右对齐
center：局长对齐
space-between：两端对齐
sapce-around：这种对齐方式的效果是元素之间的距离是距离边界的距离的2倍。
5，align-items：flex-start | flex-end | center | baseline | stretch（默认值）
定义flex项目在交叉轴上的对齐方式
flex-start:：起点对齐
flex-end：终点对齐
center：中点对齐
baseline：对齐第一个flex元素里面的文字
6，align-content：flex-startt | flex-end | center | space-between | space-around | stretch（默认）
定义多根轴线的对齐方式，适用于多行或者多列的flex布局，如果只有一行或者一列则改属性不起作用，所以必须把flex-wrap设置为wrap。
还是以主轴在水平方向为例，先把flex子元素设置为多行。
flex-start：起点对齐
flex-end：终点对齐
center：中点对齐
space-between：与交叉轴的两端对齐
spce-around：每根轴线之间的距离为为轴线到两端距离的两倍
三，Flex子元素
Flex子元素上也有6个属性，分别是：
1，order：默认0
定义flex子元素的排列顺序，数值越小排列越靠前
2，flex-grow：默认0
定义项目的放大比例。
如下图设置四个flex子元素的宽度分别为flex-grow：1，2，3，4
3，flex-shrink：默认值1，必须是非负整数。
定义项目的缩小比例，和flex-grow属性意义相反。
如果值为0则对于的flex子元素不会缩小。
4，flex-basis：auto（默认）
定义在分配多余空间之前，项目占据的主轴空间。如果空间不足则默认情况下项目也会缩小。
5，flex
flex是flex-grow，flex-shrink，flex-basis的简写
6，align-self：auto（默认，继承父元素） | flex-start | flex-end | center | baseline | stretch
可以设置单个flex子元素的对齐方式，改属性会覆盖flex容器上的align-items属性。
参考：https://mp.weixin.qq.com/s/NnIL0SBsVLJI6lJDJMKewA
