display:flex 布局

一：display:flex 布局
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1. flex-direction 容器内元素的排列方向(默认横向排列)
   flex-direction:row; 沿水平主轴让元素从左向右排列
2. flex-wrap 容器内元素的换行(默认不换行)
   flex-wrap: nowrap; (默认)flex-wrap: wrap;
3. justify-content 元素在主轴（页面）上的排列
   center| flex-start| flex-end| space-between| space-around
4. align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
   center| flex-start| flex-end| baseline
5. align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
   center| flex-start| flex-end| space-between| space-around