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

Posted 2023-03-28

　　父级元素有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;
参考技术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;
本回答被提问者采纳

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

参考技术A display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。具体详细情况我也说不清楚，不过在网上给你找了一篇关于这两个CSS盒子模型的详细介绍。你自己去看看吧http://www.easck.com/course/webdesign/2017/0405/104851.shtml