columns 分栏
值：column-width:设置每列的宽度
column-count:设置列数
例：columns{200px 3} 列数和宽度固定
columns{200px} 列宽固定，根据容器宽度动态分布列数
column-width 默认auto,定义列宽，不能为负值
column-count 默认值auto,定义列数，不能为负值
column-gap 定义列与列之间的缝隙，默认是字体的宽度，不能为负值
column-rule : column-rule-width column-rule-style column-rule-color; 设置列之间边框的厚度，样式，颜色。
column-span : none all; 设置元素是否横跨所有列。对某个元素进行设置，让其横跨所有列或不横跨。
column-fill : auto balance; 列高度自适应内容，列高度以其中最高的一列统一。
column-break-before : 设置是否在对象之前进行断行
auto(不强迫不禁止)
always(总是在元素之前断行产生新列)
avoid(避免在元素之前断行并产生新列)
column-break-after : 设置对象之后是否断行
auto(不强迫不禁止)
always(总是在元素之后断行产生新列)
avoid(避免在元素之后断行并产生新列)
column-break-inside :
auto(不强迫不禁止在元素内部断行产生新列)
avoid(避免在元素内断行产生新列)
伸缩盒（弹性盒模型）（旧版）
例：
<style>
#box{display:-webkit-box; display:-moz-box; display: -ms-box; display: box; width:600px; height:180px; margin:0; padding:0; list-style:none; box-orient:horizontal;-webkit-box-orient:horizontal; }
.li1{-weblit-box-flex:1; -moz-box-flex:1; -ms-box-flex:1; background:#666666;}
.li2{-webkit-box-flex:2; -moz-box-flex:2; -ms-box-flex:2; background:#999999;}
.li3{-webkit-box-flex:3; -moz-box-flex:3; -ms-box-flex:3; background:#cccccc;}
</style>
<ul id="box">
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
注意：一定要开启弹性盒模型，给父元素加 display:box; 属性。
display:-webkit-box; display: -moz-box; display: -ms-box;
设置弹性盒模型子元素的排列方式
box-orient : horizontal (从左到右水平排列) vertical (从上到下纵向排列)
伸缩盒子元素的对其方式
box-pack : start (从开始位置对齐，左对齐或上对齐)
center (居中对齐)
end (从结束对齐，右对齐或下对齐)
justify (两端对齐)
设置伸缩盒子的子元素的对其方式
box-align : start (从开始位置对其)
center （居中对齐）
end （从结束位置对其）
baseline （基线对齐）
stretch （自适应父元素尺寸）
box-flex : 设置子元素占父元素空间的比例
box-flex : 1;
-webkit-box-flex : 1;
-moz-box-flex : 1;
box-flex-group : 不理解
box-ordinal-group: 设置盒子子元素的显示顺序 整数值来确定显示顺序
box-direction : 设置伸缩盒子对象的子元素的排列顺序是否反转
normal (默认值，子元素按照正常顺序排列)
reverse (反转伸缩盒子对象的排列顺序)
box-lines : 设置伸缩盒对象的子元素是否可以换行显示；
singel : 伸缩盒对象的子元素只在一行显示
multiple : 伸缩盒对象的子元素超出父元素的空间是换行显示。
伸缩盒（弹性盒模型）（新版）
flex
需要给盒子添加 display : flex；属性开启弹性盒模型。display : -webkit-flex;
flex-grow : 按比例分配父元素剩下的空间。
flex-shrink : 按比例收缩移除父元素的空间。
flex-basis : 设置弹性盒伸缩基准值 length(长度值来定义宽度) 百分比 auto(无特定) content(基于内容自动计算宽度)
flex-flow : 设置弹性盒模型子元素的排列方式 flex-direction(定义弹性盒子元素排列方向) flex-wrap（控制flex容器是单行还是多行） ;
flex-direction : 设置弹性和子元素的排列方式。
row : 横向从左到右排列
row-revers : 对其方式与row相反
column : 纵向从上到下排列
column-revers : 对其方式与column相反。
flex-wrap :
来源：https://www.cnblogs.com/baixuemin/p/6495064.html