"Flex", "伸缩盒"，"justify", "align-items"……
什么叫Flex？
flexbox, 全名：flexible box, 意为灵活,有弹性的,多变的；Flex布局是2009年，W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局；
任何元素都可以使用flex布局；注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
主轴和侧轴
在CSS中，常规的布局是基于块和内联流方向，而Flex布局是基于flex-flow流,下图很好解释了Flex布局的思想：
看图2个flex item（图上标示1和2）是横向排列的，这样的布局下，横向（x方向）就是 “主轴”，纵向（x方向）就是“侧轴”。
同理，如果是flex item纵向排列的，那么y方向就是“主轴”，x方法就是“侧轴”。如下图：
属性
flex
flex-direction 决定主轴的方向（即项目的排列方向）
flexDirection: 该属性决定主轴的方向（即项目的排列方向）
flex-grow
flex-basis
flex-flow 定义对象子元素的排列方式
flex-wrap 定义对象子元素的排列方式
align-content 定义了多根轴线的对齐方式
align-items 定义项目在交叉轴(垂直的交叉轴（cross axis）)上的对齐方式
align-self
justify-content 定义项目在主轴上的对齐方式
order
flex-direction:row / row-reverse / column / column-reverse 属性决定主轴的方向（即项目的排列方向）。
flex-flow：row nowrap / row wrap-reverse / column wrap-reverse 定义对象子元素的排列方式
flex-wrap: nowrap / wrap / wrap-reverse 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
justify-content: flex-start / center / flex-end / space-between / space-around 项目在主轴上的对齐方式
align-content:stretch / flex-start / center / flext-end / space-between / space-around 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-items: flex-start / center / flex-end / stretch 定义项目在交叉轴(垂直的交叉轴（cross axis）)上如何对齐
兼容性，IE10+全面支持。
