由于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()函数使用标准的数学运算优先级规则；