CSS布局——display: flex

弹性布局display: flex，使用此种布局方式，则无需使用浮动了，总之十分方便。

常用：
在父级设置：

• display: flex;将对象作为弹性伸缩盒显示
• justify-content: space-around;水平排列方式的设置，具体值根据需要设置，不需要记，看代码提示就好
• align-items: center;垂直居中

在子级设置：

• flex: 1;按占比分配非设置固定值的空间

说明：除去固定值空间的部分，其余部分占据全部的flex：1的设置，是不能省略的，因为有时候，比如里面包裹一张图片，在页面刷新的时候，偶尔会表现非预期，所以，不能省略。

关于兼容性，请参考：https://caniuse.com/#search=flex
关于详细使用，请参考以下链接内容

参考链接：
Flex 布局教程：语法篇(阮一峰)
Flex 布局教程：实例篇(阮一峰)
Flex 布局示例
css-tricks.com
scotch.io

最后两个参考链接是纯英文的网站，里面的内容十分丰富细致，一些页面展示无论是布局还是特效都给人耳目一新的感觉，十分值得看一看。