flex布局

1、等分

<div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
//style
.tab{
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid rgba(7,17,27,0.1);
}
.tab-item{
  flex: 1;
  text-align: center;
}

2、一边宽度固定，另一边自适应

//右侧宽度固定，左侧自适应
<div class="content">
    <div class="content-left"></div>
    <div class="content-right"></div>
</div

//style
.content{   
    display: flex;
}
.content-left{
    flex: 1;
}
.content-right{
    /*flex三个参数依次表示：等分、内容缩放情况、站位空间*/
    flex:0 0 105px;
    width: 105px;   
}