Flex，全称为 Flexible Box，即“弹性布局”。
浏览器兼容性
IE 10 才支持。
传统布局的局限性
垂直居中不容易实现。
基本使用
指定为 Flex 布局：
- 行内元素: display: inline-flex;
- 非行内元素：display: flex;
设置为 flex 布局之后，子元素的 float, clear 和 vertical-align 将失效。
容器的属性 flex-direction
决定子元素的排列方向。值为 row, column 等。
- row：默认值。一行一行的排列，可以理解为一行一个。
- column：一列一列的排列，可以理解为一列一个。
- row-reverse：row 反向
- column-reverse：column 反向
容器的属性 flex-wrap
顾名思义，是否折行。
以 flex-direction: column 为例，如果一行装不下那么多子元素时，默认时不折行的。需要修改为 wrap.
- nowrap 不折行
- wrap 折行
- wrap-reverse 反向折行
容器属性: flex-flow
flex-direction 和 flex-wrap 的简写形式。
容器属性: justify-content
主轴的对齐方式。
justify, 两端对齐的意思，也有整理版面的意思。
- flex-start: 默认值。左对齐
- flex-end: 右对齐
- center: 居中
- space-between: 两端对齐，即两端两个子元素贴边，中间子元素等距离排列。
- space-around：所有子元素两端等距，结果是，两端子元素距离边距离是中间元素间距离的一半。
容器属性:
参考
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式