display: box; 可以参考[flexbox]。(http://www.html5rocks.com/en/tutorials/flexbox/quick/)
Box的属性
-box-flex
-box-orient
-box-direction
-box-align
-box-pack
html
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
1. box-flex 占父元素的剩余空间
.item{
-webkit-box-flex: 1;
}
box-flex: 1
.item:nth-child(2){
-webkit-box-flex: 2;
}
box-flex: 2
.item:nth-child(2){
-webkit-box-flex: 2;
}
.item:nth-child(3){
-webkit-box-flex: 3;
}
box-flex: 3
2. box-orient 子元素排列方向
.list{
-webkit-box-orient: horizontal;
}
horizontal
.list{
-webkit-box-orient: vertical;
}
vertical
3. box-direction 子元素的排列顺序
.list{
-webkit-box-direction: normal;
}
normal
.list{
-webkit-box-direction: reverse;
}
reverse
4. box-align 子元素的垂直对齐方式
horizontal
.list{
-webkit-box-orient: horizontal;
-webkit-box-align: start;
}
start
.list{
-webkit-box-orient: horizontal;
-webkit-box-align: end;
}
end
.list{
-webkit-box-orient: horizontal;
-webkit-box-align: center;
}
center
.list{
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
}
stretch
vertical
.list{
-webkit-box-orient: vertical;
-webkit-box-align: start;
}
豆芽图片20191213152417559.png
.list{
-webkit-box-orient: vertical;
-webkit-box-align: end;
}
豆芽图片20191213152432807.png
.list{
-webkit-box-orient: vertical;
-webkit-box-align: end;
}
豆芽图片20191213152443744.png
.list{
-webkit-box-orient: vertical;
-webkit-box-align: end;
}
豆芽图片20191213152457391.png
5. box-pack 子元素的水平对齐方式
.list{
-webkit-box-pack: start;
}
豆芽图片20191213152637814.png
.list{
-webkit-box-pack: end;
}
豆芽图片20191213152124447.png
.list{
-webkit-box-pack: center;
}
豆芽图片20191213152704111.png
