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