分栏、弹性、响应式

分栏

• 给父元素赋值

• column-count:auto|整数； --- 控制栏数

• column-width:length； --- 每栏的宽度

• column-gap:length； --- 两栏之间的间距

• column-rule:宽度，线性，颜色； --- 栏与栏的间隔线 类似border：solid | dotted | dashed --- 实线 | 点线 | 虚线；

• column-span:all | none; --- 是否跨栏显示 子元素赋值

    #box{
        column-count: 3;
        column-gap: 50px;
        column-rule: 4px solid red;
    }
    #box h1{
        column-span: all;
        text-align: center;
    }
  

弹性布局

box-flex:弹性布局。优点：

1. 适应性强，在做不同屏幕分辨率的界面时非常实用。
2. 可以随意按照宽度、比例划分元素的宽高。
3. 可以轻松改变元素的显示顺序。
4. 弹性布局实现快捷，易维护。

• display:box | flexbox | flex; --- 将一个元素的子元素以弹性布局进行布局。
• box-orient :horizontal | vertical | inherit --- 横向 | 竖向 | 继承 子元素的排列方式
• box-direction :normal | reverse | inherit --- 正常 | 反向 | 继承 子元素的排列顺序
• box-align :start | end | center --- 靠左 | 靠右 | 居中 子元素的对齐方式
• box-pack :start | end | center --- 顶部 | 底部 | 居中 子元素的对齐方式
• box-ordinal-group ：number ; 子元素显示顺序
• box-flex ：子元素如何分配剩余空间（在子元素设置）

    html,body{
        height: 100%;
        margin: 0;
    }
    需要添加高度控制，否则无法撑满整个屏幕
    #box1{
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-box-flex:1;
    }
    #box1 div:nth-child(1){
        height:100px;
        background: red;
    }
    #box1 div:nth-child(2){
        -webkit-box-flex:1;
        background: yellow;
    }
    #box1 div:nth-child(3){
        -webkit-box-flex:1;
        background: green;
    }