分栏
给父元素赋值
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:弹性布局。优点：
- 适应性强，在做不同屏幕分辨率的界面时非常实用。
- 可以随意按照宽度、比例划分元素的宽高。
- 可以轻松改变元素的显示顺序。
- 弹性布局实现快捷，易维护。
- 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;
}
