CSS3 弹性盒子布局

1、display:flex。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能；

display:flex; 在父元素添加  作用给子类支持flex弹性盒子模型 （Flex容器）它子元素自动成为容器成员

2、使用检查
flex:1 ;拉伸比例
flex-direction:(浮动)
    1、row   主轴为水平方向 起点在左端（默认） 类似于float:left 
    2、row-reverse    主轴为水平方向 起点在右端 （与row相反）类似于float:right 
    3、column   主轴为垂直方向 起点在上端 与row 相似
    4、column-reverse 主轴为垂直方向 起点在下端端 与column相似

flex-wrap:(换行)
    1、nowrap  默认值 伸缩容器单行显示 伸缩项目不换行
    2、wrap  伸缩容器单行显示时 伸缩项目换行显示向下挤出空间
    3、wrap-reverse  换行想上挤出空间并倒序显示

justify-content:(内容水平位置)
    1、flex-start  伸缩项目向一行最右端靠齐初始位置
    2、flex-end    伸缩项目向一行最右端靠齐结束位置
    3、center    伸缩项目 居中靠齐
    4、space-between 伸缩项目向一行平均分布显示 第一项目显示在最left开始
    5、space-around  伸缩项目向一行平均分布显示 左右最边上两端保留一半空间

align-items:(内容垂直位置)
    1、flex-start  伸缩项目 空间项目在上测位置显示
    2、flex-end   伸缩项目 空间项目在下测位置显示
    3、center   伸缩项 在中间显示
    4、baseline  根据第一行文字的基线对齐
    5、stretch  默认 垂直填充伸缩容器