标签：flex 适应 base 空间 lines strong 顺序 添加 flow
columns 分栏
column的中文意思就是栏的意思，在html中，作用是分列，把一块内容相同比例均匀的分成一块一块的列，想报纸的内容似的，一篇文章在一张内容上分成好几栏那样显示，它的属性有
1.columns: columns-width column-count; 每一列的宽度和分成多少列；
例：columns: 200px 3; (ie10以上浏览器支持，火狐，谷歌支持要加兼容前缀)
-webkit-columns:
-moz-columns:
-ms-columns:
2.column-gap: width normal; (列与列之间的间距宽度，自定义或者默认normal,normal情况下，列之间间隙的宽度等于字体大小的宽度。)
例：column-gap:20px; (默认是normal);
(ie10以上都支持，火狐谷歌需要加上加上兼容前缀)
3.column-rule: column-rule-width column-rule-style column-rule-color;
用来设置列与列之间间隙中间那条分割线，属性值有线的宽度，样式，颜色；
例：column-rule:5px solid red;
(ie10以上的ie都支持，火狐谷歌需要加上前缀)
还有三个属性，用的不多，兼容性也不太好
4.column-span: 是否跨列，一般用来对栏目中的某个元素设置它显示方式是否横跨所有列，
默认是none,不横跨列显示，横跨列显示是all属性值；
例：column-span:all;(兼容性不是很好，ie10以上的浏览器支持，火狐不支持。)
5.column-fill:auto balance;对列的高度的设置方式，默认是auto,列的高度自适应内容，
balance指定列的高度以其中最高的一列统一。（此方法用的不多，了解为主）
6.column-break-before(after):属性值有auto(默认，不强迫也不禁止在指定的块级元素前产生新列),always(在指定的块级元素前断行产生新列)，avoid(禁止在指定的块级元素前产生新列) 用的比较少，了解为主，（ie10以上ie浏览器支持，火狐不支持。）
伸缩盒（弹性盒模型）（旧版）
例：
<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 : 设置容器是单行还是多行
nowrap : flex容器为单行，子项可能会溢出
wrap : flex容器为多行， 子项溢出分布会放置到新行，子项内部会发生断行
wrap-reverse : 反转wrap排列
align-content : 子元素在弹性盒里的对其方式
flex-start:
flex-end:
center:
space-between:
space-around:
stretch:默认值
align-items : 定义子元素在容器里的侧轴（纵轴）方向上的对其方式
flex-start :
flex-end:
center:
baseline:
stretch:默认值
align-self : 定义flex子项单独在侧轴（纵轴）方向上的对齐方式, 适用flex子项
auto :
flex-start :
flex-end:
center:
baseline:
stretch
justify-content : 设置弹性盒子元素在横轴方向上的对其方式
flex-start:
flex-end:
center:
space-between:
space-around;；
order : 用数值定义排序方式，数值小的排在最前面，可以为负值。
css3弹性伸缩和使用
标签：flex 适应 base 空间 lines strong 顺序 添加 flow
原文地址：http://www.cnblogs.com/baixuemin/p/6492510.html
