flex布局 横线滚动

要实现flex布局中的横向滚动，你可以使用`flex-wrap`属性将flex容器内的项目进行换行显示，并且设置`overflow-x: auto`来让容器水平方向出现滚动条。具体步骤如下：

1. 在HTML中，使用`div`元素创建一个包裹容器，设置其`class`属性为"wrapper"。
2. 在包裹容器内部，使用多个`div`元素创建项目，设置它们的`class`属性为"item"。
3. 在CSS样式表中，使用`.wrapper`选择器选择包裹容器，并设置`display: flex`让其变为flex容器。
4. 继续在`.wrapper`选择器下设置`overflow-x: auto`，这样当项目超出容器宽度时，会出现水平滚动条。
5. 设置`.item`选择器的样式，包括高度、宽度、背景颜色等。
6. 最后，通过在HTML中引入这段CSS样式表，即可实现flex布局的横向滚动效果。

下面是一段示例代码：

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<style type="text/css">
  .wrapper {
    display: flex;
    overflow-x: auto;
    border: 1px solid #f00;
    padding: 10px;
    width: 250px;
  }

  .item {
    height: 100px;
    width: 100px;
    background-color: #f00;
    margin: 10px;
    flex-shrink: 0;
  }
</style>

这样，你就可以实现一个flex布局的横向滚动效果了。<span class="em">1</span><span class="em">2</span>