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