一、兼容性
1、各浏览器最新版本都已支持，除了IE 10 / UC , IE 11 已经支持。
//Internet Explorer 10： 使用 -ms- 前缀； //UC浏览器： 使用 -webkit- 前缀。
2、兼容更老版本的写法
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
二、基本语法
1、声明
display:flex //水平伸缩 display:inline-flex //行内盒竖直伸缩
2、改变排列方向（主轴方向）
flex-direction:row //从左向右排列，主轴水平向右 flex-direction:row-reverse //从右向左排列，主轴水平向左 flex-direction:column //从上向下排列，主轴竖直向下，交叉轴水平 flex-direction:column-reverse //从下向上排列，主轴竖直向上
3、控制弹性元素溢出换行处理
flex-wrap:warp //此属性后，元素便不会自动伸缩，而是向下换行 flex-wrap:wrap-reverse //先排满下面一行，再往上排（竖直排列同理）
4、元素排列方向与换行组合定义
flex-flow:row wrap //flex-flow更常用。先设置主轴方向，再设置换行方向
5、设置主轴上的元素排列方式
justify-content:flex-start // 从主轴起始点开始排列 justify-content:flex-end // 从主轴终止点开始排列 justify-content:flex-end // 紧挨着放置在主轴中间 justify-content:space-between // 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点 justify-content:space-around // 均匀排列每个元素，每个元素两侧分配相同的空间 justify-content:space-evenly // 均匀排列每个元素，每个元素之间的间隔相等，视觉上真正的均匀
6、设置交叉轴上的元素排列方式
align-items:flex-start // 从交叉轴起始点开始排列 align-items:flex-end // 从交叉轴终止点开始排列 align-items:center // 紧挨着放置在交叉轴中间 align-items:stretch // 从交叉轴起始点开始排列，占满整个主轴
7、多行元素在交叉轴上的排列方式（首先：flex-wrap:wrap）
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; //均匀分布项目,拉伸‘自动’-大小的项目以充满容器 */
8、单个弹性元素在交叉轴上的排布（在整体的 align-items 基础上）
align-self : flex-start //排列在交叉轴的起点 align-self : flex-end //排列在交叉轴的终点 align-self : center //排列在交叉轴的中间 align-self : stretch //伸长占满整个交叉轴
9、弹性元素可用空间分配
flex-grow //扩大 flex-shrink //缩小
10、弹性元素组合定义
flex:grow shrink basis //把放大、缩小和基准尺寸组合定义
11、弹性元素顺序控制
order:num //默认为0，越大越靠后。可以用来控制元素上下移动
12、弹性布局操作文本节点
text-align:center //文本水平居中 align-content:center //文本竖直居中。有多行时 align-items:middle //文本竖直居中。单行时用