一、flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
注意
- 任何一个容器都可以指定为 flex 布局（行内元素也可以使用 flex 布局）
- Webkit 内核的浏览器，必须加上-webkit-前缀
- 设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效
二、父元素属性
| 属性名 | 属性值 | 备注 |
|---|---|---|
| display | flex | 定义了一个flex容器，它的直接子元素会接受这个flex环境 |
| flex-direction | row,row-reverse,column,column-reverse | 决定主轴的方向 |
| justify-content | flex-start,flex-end,center,space-between,space-around | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 |
| align-items | flex-start,flex-end,center,baseline,stretch | 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |
| flex-wrap | nowrap,wrap,wrap-reverse | 如果一条轴线排不下，如何换行 |
| flex-flow | [flex-direction] , [flex-wrap] | 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap |
三、子元素属性
| 属性名 | 属性值 | 备注 |
|---|---|---|
| flex | [number] | flex属性是flex-grow, flex-shrink 和 flex-basis的简写 |
| order | [int] | 决定主轴的方向 |
| flex-grow | [number] | 设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 |
| flex-shrink | [number] | 设置或检索弹性盒的收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间 |
| flex-basis | [length], auto | 设置或检索弹性盒伸缩基准值 |
| align-self | auto,flex-start,flex-end,center,baseline,stretch | 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器align-items的设置 |
感谢浏览，本文皇菇凉只是做简单总结（大佬请Ctrl+F4），如有觉得比较懵之处，可参考这里（阮一峰）大佬文章，详细明了有图有案例；如觉得枯燥乏味不妨去b站看看pink老师讲的课程，生动有趣还有项目，你一定喜欢的不要不要的哟！
<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="BYSWKz19-1586091904094" src="https://player.bilibili.com/player.html?aid=78124254"></iframe>flex布局（pink老师）