弹性布局flex布局属性图解 值得收藏

弹性布局（display:flex;）属性详解
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

flex垂直居中
display:flex;
align-items:center;/垂直居中/
justify-content: center;/水平居中/

首先明确一点是， 
flex 是 flex-grow、flex-shrink、flex-basis的缩写,0 1 auto
第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto

属性值较多下面放入图片方便大家使用（右键新窗口打开），打开查看大图