flex布局
基础属性介绍：
flex属性值在使用时需要区分：是在父盒子还是在子盒子上使用
flex-direction: row; // 默认值，规定div的排列方向，及改变文档流(父级)
justify-content: center; // 垂直坐标横轴在内容项之间和周围分配空间(父级)
align-items: center; // 垂直坐标纵轴在内容项之间和周围分配空间(父级)
flex-wrap: wrap; // 让弹性盒元素在必要的时候拆行(父级)
align-content: space-around; // 修改 flex-wrap 属性的行为，可以理解为设置行距(父级)
order: 2; // 设置子元素排序，当前及是第二位置，即使html代码是在第一位置(子级)
align-self: center; // 垂直坐标纵轴上单个项目对齐方式，覆盖align-items(子级)
flex: <flex-grow> <flex-shrink> <flex-basis>;(子级)
flex-grow：指定如果有多余宽度，项目是否可以扩大。
flex-shrink：指定如果宽度不足，项目是否可以缩小。
flex-basis：项目的初始宽度。
eg: flex: 0 1 150px;的意思就是，项目的初始宽度是150px，且不可以扩大，但是当容器宽度不足150px时，项目可以缩小。
flex-flow: <flex-direction> <flex-wrap>(父级)
flex-direction：文档流的方向
flex-wrap：是否换行
引用含实例：
www.ruanyifeng.com/blog/2015/0…
developer.mozilla.org/zh-CN/docs/…
