弹性布局

在这段代码中有两个div，container和box，先来看一下结果
box只在水平方向上居中

现在在代码中加一句display: flex;

再来看结果

box在水平和垂直方向上都居中了

在这里，我们创建了一个容器和其内部的方块，并将容器display属性设置为flex。可以看到，对容器内的方块，我们只是添加了 margin: auto; 这一行代码，便实现了其相对容器水平与垂直上的完全居中。也就是说，flexbox首先便解决了css一直以来在垂直居中上的痛点。

Flexbox简介
要使用弹性盒布局，首先便要定义一个弹性容器（flex container）。弹性容器可以通过设置display的值为flex或inline-flex定义，其中flex会被外界视为块级元素，而inline-flex则会被视为行内元素。处在弹性容器内部的元素，就被视为弹性项目（flex item）.

在这段代码里，弹性容器就是container，而弹性项目就是box

主轴

主轴就是弹性项目在弹性容器的排布方向，默认是横向从左到右的，也就是说，在向弹性容器中塞元素的时候，默认是从左到右一个一个放好的。 当然，主轴的方向是可变的，可以是从右向左，甚至可以是从上到下的。主轴的方向由属性flex-direction控制。
举一个栗子：
将box的margin属性删掉
将原本的1个box元素复制为6个.

可以很明显的看出6个弹性项目都挤在了一起

flex-direction: row | row-reverse | column | column-reverse
改变主轴方向：
row-reverse（主轴方向从右向左）
column：

主轴上的对齐方式
justify-content属性控制的便是弹性项目在主轴上的对齐方式，之前6个box挤在了一起，是因为该属性默认是向主轴的起点对齐。
justify-content: flex-start | flex-end | center | space-between | space-around;
center：
space-between：
space-around：
接下来我们向容器内再加一些方块。将原来的6个box再复制一遍，现在容器内有12个方块了。刷新页面，我们发现这些方块又连成了一片，甚至还超出了容器的边界
于是我们需要为弹性容器再添加一条属性：flex-wrap: wrap;
侧轴
侧轴是定义弹性容器内是否以多行显示，以及多行的排布方向。侧轴的方向与主轴是垂直的，如果主轴是横向的，那么侧轴就是纵向的，反之亦然。
侧轴由属性flex-wrap控制，默认为单行显示，也就是不换行。
flex-wrap: nowrap | wrap | wrap-reverse
wrap-reverse：
侧轴与主轴一样可以定义行在侧轴线的对齐方式，由属性align-content控制。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
一行的高度是由这一行内最高的元素决定的，那么怎样让元素相对这一行的高度垂直居中呢。
align-items属性控制的便是行内项目的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch

flex-grow属性定义的便是弹性项目的扩展能力。但需要注意的是，flex-grow与其他方块的值是成比例的。例如上述示例中，四个方块的属性值分别为2、1、4、3，总和为10，则方块1扩展能力就是2/10，它能占用的剩余空间就是1/5的大小。而如果只有一个方块定义了flex-grow属性，因为其他方块值均为默认值0（不扩展），那么无论这个方块的flex-grow属性为多少，它都将得到全部的剩余空间。

flex-grow: ; /* default 0 */

与之相对应的，就是flex-shrink属性。该属性定义弹性项目的收缩能力。在容器缩小时随着容器等比例缩小。

flex-shrink: ; /* default 1 */

flex-basis：这个属性定义弹性项目在主轴上所占的长度。很容易理解，与宽度类似，但与宽度不同的是，flex-basis是在主轴方向上的长度，也就是说，如果主轴是纵向的，那么它定义的就是高度（可以这样理解）。

转载来源：https://www.jianshu.com/p/cf394b500471