CSS3中width的calc()用法

之前遇到好多时候不知道父级容器的宽度，大多数都是借助js或jquery获取父级HTML标签的宽度，然后再减去之间的间隔距离来确定容器内图片或子级容器的宽度，现在CSS3的calc很好的解决了这个问题，不要烦了。。。

CSS代码

    .demo{
        background: #666;
        display: flex;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between;
      }
    .box{
        width: 33.333333333333336%;
        width: calc((100% - 15px*2) / 3);
        background: #f00;
        height:90px;
    }

HTML代码

   <div class="demo">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
    </div>

效果图