CSS3 display：flex和display：box有啥区别

Posted 2023-03-28

display:box使用的时候，如果两个box-flex的内容不一样，那么内容多的那个宽度会宽一些。

flex则不会

测试例子如下：

        <style>
.test > divwidth:300px;
.boxdisplay:-webkit-box;
.box div-webkit-box-flex:1;height:110px;border:1px solid #DDD;
.flexdisplay:flex;
.flex divflex:1;height:110px;border:1px solid #DDD;
</style>
<div class="test">
<div class="box">
<div>box内容测试</div>
<div>box内容测试box内容测试box内容测试</div>
</div>
<div class="flex">
<div>flex内容测试</div>
<div>flex内容测试flex内容测试flex内容测试flex内容测试flex内容测试flex内容测试flex内容测试</div>
</div>

</div>

参考技术A 父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。

如：
html：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>

article
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;


.sectionOne
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;

.sectionTwo
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;

.sectionThree
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background:green;
本回答被提问者采纳