Box 弹性布局的介绍

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