display: flex 是一种布局方式，它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经可以在所有浏览器中使用。
Flex是Flexible Box的缩写，意思为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将会失效。
flex布局 （1）flex-direction:column --(flex-column); 让元素沿垂直主轴从上到下垂直排列 （2）flex-wrap: nowrap; --(flex-nowrap); (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%； （3）flex-wrap: wrap; --(flex-wrap); 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了； （4）justify-content : flex-start; --(justify-start); 元素在主轴（页面）上由左或者上开始排列 （5）align-content: stretch; --(align-stretch); 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
（1）flex的容器属性 以下6个属性设置在容器上：
flex-direction flex-wrap flex-flow justify-content align-items align-content（2）flex的项目属性 以下6个属性设置在项目上：
order flex-grow flex-shrink flex-basis flex align-self