一、flex布局
学习flex弹性布局为了解决一些特殊的布局，在这之前我们可以利用大盒子套小盒子，浮动，定位等来完成一些简单的布局，但是不能完成有些特殊的布局。
1、任何一个容器都可以设为flex布局，称该容器为flex容器，它的所有子元素成为flex项目。（块级元素也可以使用flex布局）
2、项目默认沿主轴排列，主轴默认在水平方向，交叉轴默认在垂直方向。
二、对于容器有哪些设置属性？
1、首先我们要给一个父盒子设置为弹性布局display:flex
2、指定为flex布局后，我们对该容器可以有下面6种属性设置。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
(1)、flex-direction属性决定主轴的方向（即项目的排列方向），它有四个属性值flex-direction: row | row-reverse | column | column-reverse;
图片.png
row:(默认值)：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，七点在右端
column：主轴为垂直方向，起点在上沿
column：主轴为垂直方向，起点在下沿
(2)、flex-wrap属性定义：如果一条轴线排不下，如何换行。它有三个值：flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行
wrap:换行，第一行在上面
wrap-reverse:换行，第一行在下方
nowrap不换行.png
nowrap默认不换行时，如果容器宽度小于所有项目宽度总和，项目宽度会自适应容器宽度
wrap.png
项目大下不变，当容器装不下时会换到下一行
wrap-reverse.png
换行，但是颠倒上下行顺序
(3)、以上两种属性可以简写为：flex-flow: <flex-direction> || <flex-wrap>
(4)、justify-content属性定义了项目在主轴上的对齐方式。它有五个值。justify-content: flex-start | flex-end | center | space-between | space-around;
下面假设主轴为从左到右：
flex-start(默认值)：左对齐
flex-end:右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等,所以，最左和最右边的项目离边框的间隔是项目与项目之间间隔的一半。
图片.png
(5)、align-items属性定义项目在交叉轴上如何对齐，它有五个值：align-items: flex-start | flex-end | center | baseline | stretch ;
具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度。
图片.png
(6)、align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。它有五个值。
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐。
center：与交叉轴的中点对齐
space-between:与交叉轴两端对齐，轴线之间的间隔平均分布。
作者：雅玲哑铃
链接：https://www.jianshu.com/p/1a0aa3d8029f