滑动盒子/弹性盒子

css3的滑动和弹性盒子 了解也不多 但还是想跟大家分享一下

弹性盒模型（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设置垂直排列

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