由于
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()函數使用标準的
數學運算優先級
規則；