flex display

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。

许多设计师会发现弹性盒容易上手。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中的顺序是独立的，通过使用弹性盒，定位子元素变得更加简单，复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素，而不是基于代码的声明和导航顺序。

"display: block" 生成一个块元素盒。
"display: flex" 的行为类似于块元件（ block element）和根据本flexbox模型布置出其含量。

更多：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Flexible_boxes

---

　　例如

/*display:flex*/
.box{
display:flex;
width:300px;
}
.box div{
height:30px;
border:1px solid #f00;
box-sizing:border-box;
flex:1;
}

/*display:-webkit-box*/
.box{
display:-webkit-box;
width:300px;
}
.box div{
height:30px;
border:1px solid #f00;
box-sizing:border-box;
-webkit-box-flex:1;
}


使用flex，两个框的宽度是一样的
使用box，第一个框的宽度被压缩了。