滑动盒子/弹性盒子

弹性盒模型（flex box）实现了等高布局，元素间自适应，灵活的尺寸和对齐方式

example:

​<div class="container">
	<div class="col1" style="border: 1px red solid;">column1</div>
	<div class="col2" style="border: 1px blue solid;">column2</div>
	<div class="col3" style=" border: 1px green solid;">column3</div>
</div>

​

.container {
    display: box;/*设置成box 使用*/
    box-orient: vertical;/*垂直排列*/
}
.col1 { box-flex: 1;}
.col2 { box-flex: 1;}
.col3 { box-flex: 2;}

*/ box-orient: vertical;/*垂直排列*/}.col1 { box-flex: 1;}.col2 { box-flex: 1;}.col3 { box-flex: 2;}
box-flex指父盒子中除了子盒子以外的剩余空间如何被子盒子分割,数字越大分到的越多。这也意味着每个元素的padding不会额外增加它的宽度