css3給display屬性提供了box這個值，極大的方便了開發者，下面給大家介紹css3 display box具體用法。

其中的一個場景如下：

假如我們想要使得內部的123元素水平以不同的比例分割outer所占的空間，以往的做法我們可能會讓123元素浮動或者設置display屬性為inline-block，然后再給width屬性設置寬度百分比去分割outer。

使用display:box后可以這樣實現：

效果如下：

子元素中box-flex屬性為該元素的占比，若想讓此屬性生效，父元素必須設置display:box。以a3為例，a3設置了box-flex為3，則他所占的寬度為600*(3/(1+2+3))為300px。

如果其中一個子元素設置了固定寬度100px，則剩下的500px將會參與到比例劃分的規則中。

以上所述就是本文給大家分享的css3 中display box使用方法，希望大家喜歡。