flex模型是w3c最新提出的一種盒子模型，很好的解決了普通模型的一些弊端。
一、比較兩種盒子模型：
demo： 給div添加邊框，觀察他們的區別
<body> <div class="container"></div> </body>①普通模型css：
* { box-sizing: content-box; } .container { margin: 30px; width: 300px; height: 300px; background-color: red; border:20px solid aqua; }②flex彈性模型css：
* { box-sizing: border-box; } .container { display: flex; margin: 30px; width: 300px; height: 300px; background-color: red; border:20px solid aqua; }
運行後DIV分別的樣式：
普通模型 flex彈性模型
區別：兩種盒子類型下設置了border後div的實際大小（粉色區域）存在區別，即：
普通盒子模型：總寬度 = margin+border+width；
flex彈性盒子模型：總寬度 = width；
持續更新中……