flex-wrap只换2行

### 实现 CSS Flexbox 多行布局

为了确保 `flex-wrap` 属性能够正常工作并允许超过两行的换行，需要正确配置容器及其子项的相关样式。当设置了 `flex-wrap: wrap;` 后，默认情况下，Flex 容器会在必要时创建新的行来容纳其内部项目。

#### 关键属性设置

对于 `.container` 类应用如下样式可以实现多行布局：

.container {
    display: flex;
    flex-wrap: wrap;  /* 允许换行 */
}
.item {
    flex-grow: 0;     /* 不增长 */
    flex-shrink: 1;   /* 可缩小 */
    flex-basis: auto; /* 初始大小基于内容 */
}

如果希望每个项目的宽度固定为特定值，则可以通过调整 `flex-basis` 来指定具体尺寸[^1]。

另外需要注意的是，浏览器窗口大小的变化可能会影响实际展示效果。因此，在设计响应式网页时应考虑媒体查询的应用，以适应不同的屏幕分辨率和设备特性。

#### 示例代码片段

下面是一个完整的 HTML 和 CSS 组合示例，展示了如何让 Flex 容器中的元素跨越三行以上显示：

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

.multi-line-container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: calc(33.33% - 10px); /* 每三个项目占满一行，并留有间距 */
    margin: 5px;
    box-sizing: border-box;
}

此例子中，`.item` 的宽度被设定为大约三分之一的父级容器宽（减去一些边距），从而使得每行最多能放置三项。随着更多项目的加入，自然就会形成更多的行数。