利用flex布局横向滚动做导航栏

先上代码

.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;
    }

<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 - - - 导航栏的位置
• 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;
  }

其实就是利用消除margin合并的方法中的添加兄弟标签的方法。

自己踩坑了，记录一下。