flex布局实现横向滚动

实现效果：移动端导航条，若干个子项，均匀排列，超出容器宽度的部分拖动滚动条显示。

.nav {
    display: flex;
    padding-top: 44px;
    height: 100px;
    background-color: #f3f5f7;
    overflow-x: auto;
  }
  .nav li {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    /* width: 88px; */
    flex-basis: 88px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .nav li img {
    width: 30px;
    margin: 5px 0;
  }

分析： 如果只是普通的flex布局，子项的li 设置为flex：1 width：88px 所有子项均匀排列，但是不能实现滚动效果。需要加上flex-basis: 88px; flex-shrink: 0;

1. flex-basis: 88px 子容器基准大小 表示在不伸缩的情况下子容器的原始尺寸。
2. flex-shrink: 0 收缩比例
3. white-space: nowrap 规定段落中的文本不进行换行
4. overflow-x: auto 横向溢出元素的内容区域添加滚动