flex-wrap: wrap;不起作用

### 关于 `flex-wrap: wrap` 样式不生效的原因分析

当遇到 `.container {display: flex; flex-wrap: wrap}` 这样的定义时，如果发现子项未能按照预期换行，则可能是由于以下几个原因造成的[^1]。

#### 子元素宽度设定不当
对于设置了 `flex-wrap: wrap` 的容器而言，其内部项目的总宽度超过容器本身宽度才会触发换行行为。因此，若所有子元素的组合宽度始终小于或等于父级容器宽度，则不会发生换行列现象。可以通过调整`.item {flex-basis: 120px;}` 中的基础尺寸来测试这一效果。

.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33.33% - 20px); /* 调整基础大小 */
}

#### 父容器宽度不足
另一个常见问题是父容器本身的宽度不足以让子元素溢出并形成新行。此时可以尝试增加父容器的宽度或者减少子元素的数量/宽度以观察变化。

.container {
    width: 80%; /* 扩展父容器宽度 */
    max-width: none;
}

#### 浏览器兼容性问题
尽管现代浏览器普遍支持 Flexbox 布局模型，但在某些旧版本浏览器中可能存在部分特性未完全实现的情况。建议检查目标用户的浏览器环境，并考虑加入适当的 vendor prefixes 或者采用渐进增强策略[^4]。

#### CSS 属性冲突
还需注意是否存在其他 CSS 规则覆盖了当前设置，比如存在更具体的样式声明影响到了 `flex-wrap` 的表现形式。利用开发者工具审查实际应用到 DOM 元素上的最终样式可以帮助定位此类问题。

---