[CSS3] css也能計算！ - calc()

為了方便排版CSS3 引進了  flexbox 的用法，但使用上還是有些限制，

例如

1. 同一個容器底下的五個子元素中，只有兩個需 flexbox 的效果，但又不想改變html結構時
2.  一行 (row) 有三個元素，目標是space-between的排版，而容器中共有5個元素，第二行將無法與第一行對齊

上述第 2 點就會比較適用 calc() ，尤其是 calc 可以直接在 百分比與 像素之間直接進行計算

使用方法：

.item-container{
  margin-left:-10px;
  margin-right:-10px;
}

.my-item{
  width: calc((100% - 60px)/3);
  height:30px;
  padding:5px 10px;
  float:left;
  margin:0 10px 5px;
  box-sizing:border-box;
}