Flex布局
。
Flex容器是什么
任何容器都可以使用Flex布局，当我们设置一个容器（一般是div）的display样式为display: flex; display: inline-flex; 的时候，这个容器就是一个Flex容器。
Flex容器有几个比较重要的概念：
1、水平主轴(main axis) 和垂直交叉轴(cross axis)，默认情况下，水平方向为main axis，垂直方向为cross axis，当然你也可以手动修改，使水平方向为cross axis，垂直方向为main axis，这个我们一般不需要修改。
2、flex item：Flex容器中的每一个项被称为flex item。
3、主轴空间、交叉轴空间：我们可以简单的这么理解， 每个flex item在主轴方向上的宽度为主轴空间。每个flex item在垂直方向上的高度为交叉轴空间。
Flex容器样式
在Flex容器上可以设置的css样式主要有六个，分别是flex-direction、flex-wrap、 flex-flow、 justify-content、 align-items、 align-content。接下来依次介绍这几个属性
容器样式1：flex-direction：设置主轴的方向，其实就是flex item的排列方向。
默认值：row：主轴为水平方向，flex item水平方向从左向右依次排列。
row-reverse：主轴为水平方向，flex item水平方向从右向左依次排列。
column：主轴为垂直方向，flex item垂直方向从上到下依次排列。
column-reverse：主轴为垂直方向，flex item垂直方向从下到上依次排列。
容器样式2：flex-wrap：决定容器内项目是否可以换行
默认值nowrap：flex item不可以换行，主轴空间改变时，flex item的空间会随着主轴空间会跟随主轴调整。
wrap：主轴总尺寸超出容器尺寸的时候，换行。
wrap-reverse：主轴总尺寸超出容器尺寸的时候，换行，不过第一行在下面，而不是在上面。
容器样式3：flex-flow：flex-direction和flex-wrap的简写。
语法如下：flex-flow: row nowrap;
容器样式4：justify-content：定义了flex item在主轴上的对齐方式
默认值flex-start：左对齐
flex-end：右对齐。
center：居中对齐。
space-between：两端对齐，项目之间间隔相等，左右两边贴着容器最左边和最右边。
space-around：每个flex item左右两边的距离相等，所有最左边的距离和最右边的距离比中间的距离少一倍。
容器样式5：align-items：定义flex item在交叉轴的对齐方式
默认值stretch：填满flex容器的高度。
flex-start：flex item高度不同的时候，顶部对齐。
flex-end：flex item高度不同的时候，底部对齐。
center：flex item高度不同的时候，垂直方向居中对齐。
baseline：第一个flex item中文字的基线对齐，一般用的少。
容器属性6：align-content：定义多根轴线的对齐方式。 这个稍后学习
当你的flex-wrap设置为nowrap的时候，只有一根主轴，这个属性不起作用。只有当flex item有可能换行的时候，这个属性会起作用。
Flex Item属性
除了可以在Flex容器上设置css样式之外，还可以在每一个具体的flex item元素上设置css样式，主要有以下样式：order、flex-basis、flex-grow、flex-shrink、flex、align-self这几个属性。
Flex Item属性1：order：定义flex item在flex容器中的位置
order默认值为0，数值越小，越排在前面。
Flex Item样式2：flex-grow：定义项目在主轴的放大比例
如果主轴有剩余的空间，flex-grow定义项目的空间如何放大。默认值为0，也就是不放大。如果flex-grow都设置为1的话，所有项目同比例放大，如果flex-grow设置为1：2的话，两个flex item的空间比例为1：2。
那如果主轴的空间不够用，就需要压缩空间，这个时候压缩空间的比例，就要用到下面这个属性了。
Flex Item样式3：flex-shrink：定义项目在主轴的缩小比例
默认值flex-shrink，当主轴空间不足的时候，不压缩flex item的空间。
Flex Item样式4：flex：flex-grow flex-shrink 和flex-basis 三个属性的结合。
格式如下：flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Flex Item样式5：align-self 允许单个项目有自己在交叉轴的对齐方式
默认值auto，继承flex容器的align-items的属性。
