flex布局实现水平滚动，解决最后一个子元素设置margin-right无效

html:

<div class="tabs">
      <ul>
        <li class="active"><span>全部</span></li>
        <li><span>tab1</span></li>
        <li><span>tab2</span></li>
        <li><span>tab3</span></li>
        <li><span>tab4</span></li>
        <li><span>tab5</span></li>
        <li><span>tab6</span></li>
      </ul>
    </div>

css:

/* 外层加一个div解决最后一个子元素设置margin-right无效 */
.tabs{
  width: 100%;
  overflow: auto;
}
.tabs>ul{
  width: max-content;/*配合外层div解决最后一个子元素设置margin-right无效 */
  display: flex;
  align-items: center;
  margin-top:12px;
  flex-wrap: nowrap;
}
/* 隐藏横向滚动条 */
.tabs::-webkit-scrollbar{
  display:none;
}
.tabs li{
  width: 76px;
  height: 32px;
  background: #F0F2F4;
  border-radius: 0.08rem;
  font-size: 15px;
  line-height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex: 1 0 auto;
}
.tabs li.active{
  color: #FFFFFF;
  background: #F45350;
}