Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
一、flex的浏览器内核兼容写法
{
display:-webkit-flex;
display:-moz-box;
display:-mz-flexbox;
display:flex;
}
二、容器上的六个属性、容器内的子项目上的六个属性
①、容器上的六个属性：
flex-direction: 决定子项目主轴的方向（默认值为row）
flex-wrap: 决定子项目是否换行（默认值是不换行nowrap）
flex-flow: direction wrap的合并写法
justify-content: 决定子项目(水平)横向布局方式（默认值flex-start）
align-items: 决定子项目(垂直)纵向布局方式（默认值stretch）
align-content: 子项目有多列时，决定子项目的纵向布局方式（默认值flex-start）
②、容器内的子项目的六个属性：
order: 设置子项目的顺序(默认为0)
flex-grow: 子项目是否可扩大（默认为0，不扩大）
flex-shrink: 子项目是否可缩小（默认为1，可缩小）（0是false,1是true）
flex-basis: 设置子项目的初始宽度（默认为auto）
flex: grow、shrink、basis合并
align-self: 设置子项目(垂直)纵向方向的位置（默认值stretch）
三、容器上的六个属性
①、flex-direction: 决定子项目主轴的方向（默认值为row）
来源：前端开发博客
参考： https://www.cnblogs.com/qingchunshiguang/p/8011103.html