父級元素有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;}

**區別**，僅是各階段草案命名。- W3C 2009年第1次草案：[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)- W3C 2012年第5次草案及以後的候選推薦標準：[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)

前者是flex 2012年的語法，也將是以後標準的語法，大部分瀏覽器已經實現了無字首版本。後者是2009年的語法，已經過時，是需要加上對應字首的。