display:flex属性?
（随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能）
display : flex;(语法是添加到父容器上)
- flex-direction: row; 布局的排列方向 （主轴排列方向）
(1) row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
(2) row-reverse 显示为行。但方向和row属性值是反的
(3) column 显示为列
(4) column-reverse 显示为列。但方向和column属性值是反的
效果图如下:
2.flex-wrap : nowrap; 是否进行换行处理。
(1)nowrap： 默认值，不换行处理
(2)wrap： 换行处理
(3)wrap-reverse：反向换行
效果图如下:
运用换行处理之后 效果图如下：
3.justify-content：属性决定了主轴方向上子项的对齐和分布方式。
（1） flex-start ： 子项都去起始位置对齐。
（2） flex-end ： 子项都去结束位置对齐。
（3）center ： 子项都去中心位置对齐。
（4） space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
（5） space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
（6） space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
效果图如下：
效果图分别如下;
space-between : 表现为两端对齐。
space-around : around是环绕的意思
space-evenly : evenly是匀称、平等的意思。
4 align-items : 每一行中的子元素上下对齐方式。
默认：stretch默认值，拉伸。
(1) flex-start 表现为容器顶部对齐
(2) flex-end 表现为垂直居中对齐
(3) center 表现为容器底部对齐
如图所示：
效果图如下：
stretch默认值，拉伸。
flex-start 表现为容器顶部对齐
flex-end 表现为垂直居中对齐
center 表现为容器底部对齐