手机网页推荐使用，PC网页建议做好兼容及回退机制，避免布局错乱，总归一句话：好用！
一.兼容性
五大主流新浏览器都支持，手机网页兼容性较好，PC端建议做好回退机制；本文内容未添加前缀，文尾有彩球。
兼容情况
二、具体使用
html片段
1.父元素属性
(1) flex-direction:row | row-reverse | column | column-reverse; 子元素排列方式
(2) flex-wrap:nowrap | wrap | wrap-reverse; 子元素是否可以换行
(3) flex-flow:flex-direction || flex-wrap 前两个属性的简写方式
(4) justify-content:flex-start | flex-end | center | space-between | space-around; 子元素的主轴对其方式
注意：
1.设为 flex 布局后，子元素的float、clear和vertical-align属性将全部失效。
2.justify-content:space-between，两端对齐，项目之间的间隔都相等。
3.justify-content:space-around，项目两侧的间距相等，项目之间的间距大一倍。
(5) align-items:flex-start | flex-end | center | baseline | stretch（默认值）; 子元素的交叉轴对其方式
注意：
align-items:baseline，子元素第一行文字的基线对齐。
align-items:stretch：如果子元素未设置高度或设为auto，将占满整个容器的高度。
(6) align-content:flex-start | flex-end | center | space-between | space-around | stretch; 多轴线对齐方式
注意：
多根轴线的对齐方式，如果子元素只有一根轴线，该属性不起作用。
2.子元素属性
(1) order:决定子元素排列的前后，数值越小，越靠前，默认为0；
(2) flex-grow:放大子元素比例；
(3) flex-shrink:子元素缩小比例，默认为1；如果一个字元素的flex-shrink属性为0，改子元素不缩小；
(4) flex-basis:*px/auto ，可以定义该子元素宽度，最大值 = father宽 - 其它项目的最小宽度；
(5) flex:flex-grow, flex-shrink 和 flex-basis的简写；
默认值： 0 1 auto， 快速值auto (1 1 auto) 和 none (0 0 auto)
(6) align-self:允许单个子元素有与其他字元素不一样的对齐方式。
注意：
1.可覆盖align-items属性。
2.默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
3.思考题
怎么实现这个布局？
骰子
4.福利
a.如果你的项目是mvc框架配合webpack及postcss的话，可以忽略这个工具;如果不是，你可以考虑使用：前缀添加在线工具；
b.你也可以下载引入flex.css，参考 flex.css介绍及下载。
文章部分内容来自：阮一峰flex讲解
作者：提小莫
链接：https://www.jianshu.com/p/c800387953e1