布局总结

在PC端常见的布局：
    流式布局
    浮动布局
    层布局
在移动端常见的布局：flex布局
flex布局是css3中的提出的一种布局方案，在开发移动端页面时，
基本上都是flex布局，当然，如果你不考虑浏览器的兼容性问题，
你在PC端也可以使用Flex布局。
原因：很多PC端浏览器对CSS3的支持并不友好。

flex布局中的几个概念：
    1）容器：如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。
    2）项目：容器中的直接子元素就是项目（儿子）    项目默认都是在主轴上进行排列的
    3）主轴：默认情况下，项目是按照水平方向从左到右进行排列，这个排列方向就是主轴的方式
    4）交叉轴：和主轴垂直的那个轴就是交叉轴

容器的属性： 意味着下面的属性需要写在容器中
    flex-direction: direction本意是方向的意思  作用：用来设置主轴的方向
        row：默认值  水平面右  默认情况下，如果你不设置主轴的方向，那么默认就是水平向右的
        row-reverse   reverse本意是反转的意思    水平向左  
        column    column本意是列的意思   让主轴垂直向下
        column-reverse   让主轴垂直向上  
        注意：项目是从主轴的起点开始排列。
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content