Question

CSS3 display：flex和display：box有什么区别

Answer 1

例如

/*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;		
}

<div class="box">
	<div>第一个框</div>
	<div>第二个框第二个框第二个框第二个框第二个框第二个框第二个框第二个框</div>
</div>

使用flex，两个框的宽度是一样的

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