弹性容器flex

flex/弹性布局：
     浏览器提倡的布局模型
     浮动最初是做文字环绕效果,只是布局的过渡解决方案;
     flex才是研发出来专门做布局的模型(移动端完全支持,pc端高版本支持)
     如果不需要考虑兼容问题，优先选择flex,否则float
     布局网页更简单、更灵活
     避免浮动塌陷的问

简单效果演示：

上面的对应的为单轴线的情况，下面为多线轴的：

      水平对齐方式 
          justify-content: space-around;
      垂直对齐方式
          align-items,一根轴线; 
          align-content,多根轴线; 
          align-content:flex-start|flex-end|center | space-between | space-around | stretch;
          stretch:如果项目未设置高度或设为auto，将占满整个容器的高度。