什么是弹性布局
之前css布局都是用浮动啊，position，display这些，可是这里每一个都要自己慢慢调而且一点也不直观好吗，能不能来个智能点的，所以就有了flexbox（弹性盒布局）这个模块，只要我画一个圈，里面想怎么排就怎么排。此外弹性布局模型还能根据屏幕的转换改变布局。
注意：flexbox有新旧属性之分（以box开头的就是旧属性，已经被新属性替代，注意区分）
那怎么用这个flex哪，首先我们要给画好的圈（父元素）中添加display:flex/display:inline-flex属性**（注意：Webkit内核的浏览器须加上-webkit前缀，主要是为了兼容老版本，IE10+都是支持flex的）**才可以控制其圈里面元素的布局。
关于flex的一些属性：
一、flex
flex 是flex-grow，flex-shrink和flex-basis的缩写，代表弹性子元素的伸缩性。 注意：设为Flex布局以后，子元素的float，clear和vertical-align属性将失效。
1.flex-grow：
用来指定扩展比率，即剩余空间是正值时此flex子项相对于flex容器里其他flex子项能分配到空间比例，默认值为1。
2.flex-shrink：
用来指定收缩比率，即剩余空间是负值时此flex子项相对于flex容器里其他flex子项能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权,默认值为1。
3.flex-basis：
用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，flex子项长度的起始数值，默认值为0%。
在flex属性中该值如果为auto，则伸缩基准值的计算值是自身的 width 设置，如果自身的宽度没有定义，则长度取决于内容。
注：
如果缩写flex: 1, 则其计算值为 1 1 0%
如果缩写flex: auto, 则其计算值为 1 1 auto
如果flex: none, 则其计算值为 0 0 auto
如果flex: 0 auto或者flex: initial, 则其计算值为 0 1 auto，即flex初始值
二、flex-flow
flex-flow 是属性 flex-direction 和 flex-wrap 的简写，用于排列弹性子元素，取值： flex-direction || flex-wrap。
flex-direction： 定义弹性盒子元素的排列方向，取值row | row-reverse | column | column-reverse。 row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。 row-reverse：对齐方式与row相反。 column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。 column-reverse：对齐方式与column相反。
flex-wrap： 控制flex容器是单行或者多行，取值nowrap | wrap | wrap-reverse。 nowrap：flex容器为单行。该情况下flex子项可能会溢出容器 wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行 wrap-reverse：反转 wrap 排列。
三、order
用来定义容器排列顺序，数值小的排在前面。可以为负值。
四、Flex容器的对齐
从上面的属性中我们能看出弹性布局就是根据横纵两个轴来的。
1.justify-content——横轴对齐 取值：flex-start | flex-end | center | space-between | space-around 前三个好说，分别是左对齐，右对齐和居中对齐； space-between：两端对齐，项目之间的间隔都相等； space-around：弹性盒子元素平均分布，两端保留子元素与子元素之间间距大小的一半。
See the Pen justify-content演示 by zhangchen (@zhangchen915) on CodePen.
2.align-items——纵轴对齐 align-items属性定义项目在纵轴上如何对齐。 取值：flex-start | flex-end | center | baseline | stretch 前三个还是从字面就能理解，分别是上对其，下对齐和居中对齐（当然是在纵轴上的居中） baseline：项目的第一行文字的基线对齐，你可以把他理解为所有弹性盒子中的第一行文字为基线对齐，也就是说对齐的是文字。 stretch：如果高度为’auto’或者未设置，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
See the Pen align-items演示 by zhangchen (@zhangchen915) on CodePen.
**3.align-content——多个横轴在纵轴的对齐** align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 取值: flex-start | flex-end | center | space-between | space-around | stretch; space-between： 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。 space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。 stretch（默认值）：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。See the Pen align-content演示 by zhangchen (@zhangchen915) on CodePen.
说这么多不如来张图看看，图片来自MDN，我加了几行字。
扩展阅读： Flex 布局教程：实例篇——这里面的例子能进一步加深了解 使用 CSS 弹性盒