flex 布局循环数据超出范围滚动条（内容不换行）

  
{{ item.name }}

.tab_ul {
  display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
  display:-webkit-flex; /* Chrome */
  display:-moz-box;     /* Firefox 19 */
  display:-ms-flexbox;
  display:flex;  /*flex容器*/
  height: 100%;
  width: 100%;
  overflow-x: scroll;
}

.tab_li {
  position: relative;
  font-size: 16px;
  color: #bcc1d0;
  font-weight: 600;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

.tab_li:last-child {
  margin-right: 0px;
}
```
###### 数据超出li宽度时会换行
![在这里插入图片描述](https://img-blog.csdnimg.cn/ba66ed4343074b1cb85e5321d6b0b1ef.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-D6Iul5ZCR6ZizKCrvv6PvuLbvv6Mp,size_20,color_FFFFFF,t_70,g_se,x_16)
###### 在超出的标签添加 white-space: nowrap;（文本不会换行，文本会在在同一行上继续），详情：[http://w3c0.com/cssref/136491](http://w3c0.com/cssref/136491)
```
.tab_li {
  position: relative;
  font-size: 16px;
  color: #bcc1d0;
  font-weight: 600;
  text-align: center;
  line-height: 40px;
  white-space: nowrap;
  margin-right: 10px;
}
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/cc8e6e0a4b744fdabb503f8f4b5cb507.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b-D6Iul5ZCR6ZizKCrvv6PvuLbvv6Mp,size_20,color_FFFFFF,t_70,g_se,x_16)
### 捡了芝麻、丢了西瓜