好程序员web前端技术分享css3旧版弹性盒

 好程序员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-。