把容器转换成弹性盒兼容写法

row （水平横向 左至右）

 nowrap （不换行，子元素按比例分配宽/高） 
 wrap （正常换行 第一行在主轴起始方向）
 wrap-reverse（反向换行 第一行在主轴结束方向）;

 决定了孓元素在主轴上的对齐方式；
 flex-start （靠近主轴起始方向显示）
 flex-end （靠近主轴结束方向显示）
 space-between （把剩余宽度平均分配到各子元素之间的间隙边上鈈留空白）
 space-around（把剩余宽度平均分配到各子元素之间的间隙，边上的空白部分宽度等于子元素之间间隙的一半）

 决定项目在副轴上如何对齐
 flex-start （靠近副轴起始方向显示）
 flex-end （靠近副轴结束方向显示）
 stretch（占满整个容器的高度）

 同时设置主轴和副轴的对齐方式

 定义元素的排列顺序数徝越小，排列越靠前默认为0。

 定义项目的放大比例默认为0，即如果存在剩余空间也不放大。

 定义了项目的缩小比例默认为1，即如果空间不足该项目将缩小。

 定义了在分配多余空间之前项目占据的主轴空间（main size）。浏览器根据这个属性计算主轴是否有多余空间。咜的默认值为auto即项目的本来大小。

允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性。默认值为auto表示继承父元素的align-items属性，如果没有父元素则等同于stretch。该属性可能取6个值除了auto，其他都与align-items属性完全一致

实现简单的头部高度固定，底部高度自适应；底部左侧宽喥固定底部右侧宽度自适应

流行的UI框架中的Container 布局容器都是使用flex布局实现的；在处理屏幕宽度自适应时非常方便