flex布局是一种新的布局方式也就是弹性盒子；在布局上更加方便，但是要注意的是在flex布局中float、position是无效的。
图片来自阮一峰的博客 。下面我们进入正题：
flex布局分为分为主轴justify-content和纵轴align-items/content
justify-content：
1属性：定义为主轴上的内容
2具体分为：flex-start；flex-end；space-between；space-around；center；
align-items/content：
1属性：定义为纵轴上的内容
2具体分为：flex-start；flex-end；space-between；space-around；center；
3items定义为只有一条纵轴线；content定义为多条纵轴线；
flex-direction（方向）：
1属性：定义主轴方向；
2具体分为以下四种：row定位主轴方向为横向默认状态；row-reverse定位主轴方向横向反转；
column定位主轴方向为纵向默认状态由上至下；column定位主轴方向为横向反转状态；
flex-wrap：定义子元素是否换行：
1.nowrap定义元素不会换行；
2wrap定义元素会换行；
3wrap-reverse定义元素换行反转；
flex-flow是元素flex-direction和flex-wrap和简写属性，默认为row nowrap。
flex-shrink：属性为缩小 根据大小从整体上按照所写比例缩小
flex-grow：属性为增大 根据整体来从整体剩余部分按比例成长
order给flex元素排序 如order：number/integer（整体）
flex-basis：定义为在浏览器分配空间之前，所占得空间大小，可以用width和height来定义 ，默认为auto即项目本来的大小；
align-self：定义子元素内容自己的位置，允许子项目与其他项目对齐方式不一样。可以覆盖align-items的属性，默认属性为auto表示继承
父元素的属性，如果没有父元素就等同于stretch（拉伸）；
具体属性有 flex-start；flex-end；auto；baseline；stretch；center；
flex属性是flex-grow、flex-shrink和flex-basis的简写 默认为0 1 auto；
他有2个快捷键auto（1 1 auto）和none（0 0 auto）。