一、使用多栏布局方式column-count
1.1 可以将一个元素中的内容分为多栏显示，并且确保各栏中内容的底部对齐，各栏的宽度都是相等的，栏与栏之间的宽度也是相等的，但是不能指定每栏分别显示什么，比较适合显示文章内容，但不适合安排网页中的各元素
div#d01{ -moz-column-count:2; width:200px;/*这个宽度是该div内部多个栏的总宽度*/ background:#FCF; }
<div id="d01"> <p>ds dsa da dad a dds</p> </div>
1.2 栏之间的间隔column-gap
div#d01{ -moz-column-count:2; -moz-column-gap:2em;/*栏与栏之间的间隙*/ -moz-column-width:20em; /*单独设置每一栏的宽度*/ background:#FCF; }
1.3 栏与栏之间的间隔线column-rule
div#d01{ -moz-column-count:2; -moz-column-gap:2em; -moz-column-width:20em; background:#FCF; -moz-column-rule: 1px solid #006; }
二、盒布局display:-moz-box;box-flex:1;
2.1 自适应窗口的弹性盒布局：假设三个div元素的总宽度等于浏览器窗口的宽度，而且随着窗口的缩放这三个div的宽度随着改变
.wrap{ width:100%; display:-moz-box;/*外部元素设置为盒布局*/ display:-webkit-box; display:box; } .One{ background:orange; -moz-box-flex:3;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的3/(3+2+1)*/ -webkit-box-flex:3; box-flex:3; } .Two{ background:purple; -moz-box-flex:2;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的2/(3+2+1)*/ -webkit-box-flex:2; box-flex:2; } .Three{ -moz-box-flex:1; -webkit-box-flex:1;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的1/(3+2+1)*/ box-flex:1; background:green; }
<body> <div class="wrap"> <div class="One">01</div> <div class="Two">02</div> <div class="Three">03</div> </div> </body>
2.2 改变弹性盒模型中元素显示的顺序-moz-box-ordinal-group:1;
为每一个子元素都指定box-ordinal-group属性，属性对应的值是元素显示时的顺序序号
.wrap{ width:100%; display:-moz-box;/*外部元素设置为盒布局*/ display:-webkit-box; display:box; } .One{ -moz-box-ordinal-group:2; background:orange; -moz-box-flex:3;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的3/(3+2+1)*/ -webkit-box-flex:3; box-flex:3; } .Two{ -moz-box-ordinal-group:1; background:purple; -moz-box-flex:2;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的2/(3+2+1)*/ -webkit-box-flex:2; box-flex:2; } .Three{ -moz-box-ordinal-group:3; -moz-box-flex:1; -webkit-box-flex:1;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的1/(3+2+1)*/ box-flex:1; background:green; }
2.3 改变元素排列的方向(水平<--->垂直)box-orient
为父元素指定box-orient属性，其值为vertical或者horizontal
.wrap{ -moz-box-orient:vertical; width:100%; display:-moz-box;/*外部元素设置为盒布局*/ display:-webkit-box; display:box; }
2.4 使用盒布局时，利用box-pack和box-align属性来指定元素中文字、图像及子元素水平方向和垂直方向上的对齐方式
firefox：-moz-box-pack；-moz-box-align，safari和chrome：-webkit-pack；-webkit-align
| 属性值 | 排列方式 | box-pack的含义 | box-align的含义 |
| start | 水平 | 左对齐 | 顶部对齐 |
| center | 水平 | 居中 | 居中 |
| end | 水平 | 右对齐 | 底部对齐 |
| start | 垂直 | 顶部对齐 | 左对齐 |
| center | 垂直 | 居中 | 居中 |
| end | 垂直 | 底部对齐 | 右对齐 |
.box{ -moz-box-align:center;/*垂直居中*/ -moz-box-pack:center;/*水平居中*/ width:100px; display:-moz-box;/*元素设置为盒布局*/ display:-webkit-box; display:box; height:400px; background:#C9F; }