由於flex的兼容性對項目需求來說已經足夠，所以最近經常使用flex來進行佈局；
最近遇到了一個需求，如下圖所示：
1.外部box的width是按屏幕的百分比自動計算出來的；
2.需要始終保證1和2的的寬度一直是保持一致的。
1的寬度，是{flex:33.33%}；
如果要保持2的寬度始終和1的一樣，使用具體的數值顯然是不方便換算的。
這時候，使用calc() 函數進行動態計算，就會變得很高效便利。
calc函數的兼容性如圖：
具體寫法如圖：上下左右邊距都是15px，所以要先用總的寬度扣掉2*15px；然後再除以3個item，就可得到每個item的寬度。這樣子，只要在兼容的瀏覽器中瀏覽網頁，就能始終保證1和2的寬度一致，在視覺上就顯得很好看~~~
使用calc需要注意一些事項：
1.運算符前後都需要保留一個空格，例如：width: calc(100% - 10px)；
2.任何長度值都可以使用calc()函數進行計算；
3.calc()函數支持 “+”, “-”, “*”, “/” 運算；
4.calc()函數使用標準的數學運算優先級規則；