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;

依次是

总共分为6等分（1+2+3）

总宽度的 6分之3，6分之2，6分之1

参考技术A box：主要是控制父容器里面子元素的排列方式、排列顺序、垂直（水平）对齐方式
box-flex：主要让子容器针对父容器的宽度按一定规则进行划分

注意：
前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。
所以兼容性的代码，大致如下
display: -webkit-box; /* Chrome 4+, Safari 3.1, ios Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, android 4.4+ */本回答被提问者和网友采纳