使用flex布局实现一个横向滚动

以下是使用flex布局实现横向滚动的示例代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

.container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

.item {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  margin-right: 20px;
}

解释：

- `display: flex` 将容器设置为flex布局。
- `overflow-x: auto` 设置容器横向滚动。
- `white-space: nowrap` 防止子元素换行。
- `flex: 0 0 auto` 禁止子元素缩放。
- `width: 200px` 设置子元素宽度。
- `height: 200px` 设置子元素高度。
- `margin-right: 20px` 设置子元素之间的间距。