利用flex布局横向滚动做导航栏 适用于小程序（div改成view即可）

<div class="box">
    <div class="second">
      <div class="list">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
      </div>
    </div>
  </div>

 

.box {
      padding: 5px 10px;
      width: 300px;
      margin: 100px auto;
      background-color: #eee;
    }
    .second {
      overflow: hidden;
      height: 30px;
    }
    .list {
      line-height: 30px;
      display: flex;
      font-size: 15px;
      overflow-x: auto;
      justify-content: space-between;
    }
    .item {
      text-align: center;
      font-weight: 700;
      flex-shrink: 0;
      white-space: nowrap;
      margin-right: 10px;
      background-color: #f00;
    }

 

注意要在移动端运行

各个盒子的作用
box - - - 导航栏的位置
second - - - 增加一个标签，让左右能有留白出来，否则左边留白容易，右边就有问题了→_→
list - - - 导航栏主体
那么问题来了，留白能不能不这样包呢？可以。
对于已经做完了但没有包外层盒子，导致右边留白出现问题的朋友，简单的解决，在item最后加一个空标签就ok了

 

  <div class="item">item8</div>
      <div class="item">item9</div>
      <div class="zhanwei"></div>

.zhanwei {
      height: 2px;
      width: 1px;
      opacity: 0;
  }