flex两行scroll-x布局

### 使用 Flexbox 实现两行内容并启用横向滚动

为了实现一个包含两行内容并在必要时启用横向滚动的布局，可以通过调整 `flex-wrap` 和 `overflow-x` 属性来达成目标。具体来说：

- 设置父级容器为 `display: flex` 并指定 `flex-direction: row` 来定义项目的排列方向[^1]。
- 利用 `flex-wrap: nowrap` 防止项目换行，从而确保所有项目保持在同一行上显示，即使超出容器宽度也会继续延伸。
- 对于容器本身，则需设定固定高度以容纳预期中的两行内容，并应用 `overflow-x: auto` 或者 `scroll` 让其能够水平滚动当内部元素总宽超过容器宽度时[^4]。

下面是一个具体的 CSS 示例代码片段展示如何配置上述属性：

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* 不允许换行 */
    overflow-x: scroll; /* 当内容溢出时允许水平滚动 */
    height: 200px;      /* 假设每行高100px, 总共需要200px的高度 */
}

.item {
    min-width: 200px;   /* 给定每个item最小宽度以便测试效果 */
}

对于 HTML 结构而言，只需要简单的 div 包裹多个子项即可满足需求：

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <!-- 更多 item -->
</div>

此方案利用了现代浏览器对弹性盒子模型的良好支持特性，在不依赖额外 JavaScript 的前提下实现了响应式的双行列布局以及按需触发的水平滚动条功能[^2]。