好程序员web前端技术分享css3旧版弹性盒
1、display:box
说明：
(必须加前缀)设置弹性盒
使用如下属性，必须在父代设置display:box;
2、box-orient
说明：
在父级上设置该属性，则子代按水平排列或竖直排列。
注：所有主流浏览器不支持该属性，必须加上前缀。
1）horizontal 水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
2）vertical 垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。
3、 box-pack
说明：
在父级设置，子代的水平对齐方式。（父容器里面主轴对齐方式）
1）start 水平左对齐
2）end 水平右对齐
3）center 水平居中对齐
4、 box-align
说明：
在父级设置，子代的垂直对齐方式。（父容器里面子容器侧轴对齐方式）
1）start 垂直顶部对齐
2）end 垂直底部对齐
3）center 垂直居中对齐
4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。
5、 box-direction
说明：
在父级上设置该属性，确认子代的排列顺序。
1）normal 默认值，子代按html顺序排列
2）reverse 反序
6、 box-flex
说明：
1）占父级元素宽度的number份
2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按 number占份数
3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份
四、CSS3 多列
CSS多列(属性要加前缀)
1、column-count
说明：
属性规定元素应该被分隔的列数
适用于：除table外的非替换块级元素, table-cells, inline-block元素
2、column-gap
说明：
属性规定列之间的间隔大小
3、column-rule
说明：
设置或检索对象的列与列之间的边框。复合属性。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间规则的样式。
column-rule-width规定列之间规则的宽度。
4、column-fill
说明：
设置或检索对象所有列的高度是否统一
auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一(默认值)
5、column-span
说明：
设置或检索对象元素是否横跨所有列。
none：不跨列
all：横跨所有列
6、column-width
说明：
设置或检索对象每列的宽度
7、columns
说明：
设置或检索对象的列数和每列的宽度。复合属性
<' column-width '> || <' column-count '>
例：columns:100px 3;
注释：
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。