//Internet Explorer 10： 使用 -ms- 前缀；
//UC浏览器：              使用 -webkit- 前缀。

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

display:flex         //水平伸缩
display:inline-flex  //行内盒竖直伸缩

flex-direction:row               //从左向右排列，主轴水平向右
flex-direction:row-reverse       //从右向左排列，主轴水平向左
flex-direction:column            //从上向下排列，主轴竖直向下，交叉轴水平
flex-direction:column-reverse    //从下向上排列，主轴竖直向上

flex-wrap:warp          //此属性后，元素便不会自动伸缩，而是向下换行
flex-wrap:wrap-reverse  //先排满下面一行，再往上排（竖直排列同理）

flex-flow:row wrap      //flex-flow更常用。先设置主轴方向，再设置换行方向

justify-content:flex-start           // 从主轴起始点开始排列
justify-content:flex-end             // 从主轴终止点开始排列
justify-content:flex-end             // 紧挨着放置在主轴中间
justify-content:space-between        // 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
justify-content:space-around         // 均匀排列每个元素，每个元素两侧分配相同的空间
justify-content:space-evenly         // 均匀排列每个元素，每个元素之间的间隔相等，视觉上真正的均匀

align-items:flex-start           // 从交叉轴起始点开始排列
align-items:flex-end             // 从交叉轴终止点开始排列
align-items:center               // 紧挨着放置在交叉轴中间
align-items:stretch              // 从交叉轴起始点开始排列，占满整个主轴

align-content:flex-start           // 从交叉轴起始点开始排列
align-content:flex-end             // 从交叉轴终止点开始排列
align-content:center               // 紧挨着放置在交叉轴中间
align-content:space-between        // 均匀分布项目,第一项与起始点齐平，最后一项与终止点齐平 
align-content:space-around         // 均匀分布项目，项目在两端有一半大小的空间
align-content:space-evenly         // 均匀分布项目，项目周围有相等的空间
align-content: stretch;            //均匀分布项目,拉伸‘自动’-大小的项目以充满容器 */

align-self : flex-start       //排列在交叉轴的起点
align-self : flex-end        //排列在交叉轴的终点
align-self : center          //排列在交叉轴的中间
align-self : stretch          //伸长占满整个交叉轴

flex-grow     //扩大
flex-shrink   //缩小

flex:grow shrink basis   //把放大、缩小和基准尺寸组合定义

order:num //默认为0，越大越靠后。可以用来控制元素上下移动

text-align:center      //文本水平居中
align-content:center   //文本竖直居中。有多行时
align-items:middle     //文本竖直居中。单行时用