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