css弹性布局

布局方式 
 1.表格：缺点，表格布局的标签比使用html其他布局标签数量多，占用更多的流量资源，加载速度慢 
 2.浮动：缺点：1.对自身的影响：使用了浮动的元素可以形成块，可以让行内元素拥有宽高
              2.对父级的影响：造成父容器坍塌，父容器高度为0
              3.对兄弟元素的影响：在同一行可以放下的情况，兄弟元素的布局发生了变化 
    <!-- 3.定位 -->
    <!-- 4.多列 -->
    <!-- BFC规范（块级格式化上下文）（独立的块就是bfc）
                1.使用浮动会触发
                2.绝对定位会触发
                3.display：inline-block  table-cell  flex 
                4.overflow除了visible以外的值
            解决的问题：
                1.可以解决margin叠加
                2.margin传值问题
                3.清除浮动
                4.解决覆盖问题-->

弹性布局 display:flex
1.父容器变为弹性盒模型后，子元素会成为行内块；
2.子元素在主轴上会忽略自身宽度自适应盒子；
3.liex-direction：row；默认子项远着x轴排列，从左到右， row-revrese x作为主轴方向，起始线是从右到左
4.flex-wrap： nowrap默认  wrap换行
综合flex-flow：row wrap
5.justify-content：center  设置主轴方向上的对齐方式
space-between两端对齐      space-evenly每个子元素两边距离相同     space-around  分散对齐给每个子元素换分相同的区域

align-items： 设置y轴对齐方式
align-content：  多行容器对齐方式