SOURCE

    var design = 1000;
    var base = 100;
    function responsive() {
      var width = window.innerWidth;
      // 所求font-size = 当前屏幕宽度 / 设计图 * 基准值
      var size = width / design * base;
      document.documentElement.style.fontSize = size + "px";
    }
    responsive();
    window.addEventListener("resize", responsive);

<div class="flex-wrap">
    <div class="flex-container">
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
        <span class="flex-item">
            测试flex
        </span>
    </div>
</div>

html,body{
    margin: 0;
    padding:0
}
.flex-wrap {
    padding: .1rem;
}
.flex-container{
    display: flex;
    align-content: flex-start; 
    flex-wrap: wrap;
}
.flex-container span{
    display: block;
    width: calc((100% - .2rem)/3);
    background-color: #f00;
    margin-left:.1rem;
    color: #fff;
    height: 2rem;
    margin-bottom: .1rem;
    font-size: .5rem
}
.flex-container span:nth-child(3n-2){
    margin-left: 0px;
}