React项目CSS flex-wrap与flex-basis不生效 无法实现两列换行布局

你的代码存在3个直接导致布局不生效的问题，对应修复方案如下：

核心问题原因 #

• 重复CSS规则覆盖布局属性：你两次定义了.flexContainer .item选择器，后写的规则给item设置了固定宽度width: 500px，直接覆盖了前序规则里的flex: 1 1 50%宽度配置，元素被锁死宽度无法按50%容器宽度排列。
• 类名嵌套冲突：外层列表项和内层内容容器都使用了item类名，导致内层非flex直接子元素也命中了flex布局相关样式，层级逻辑混乱。
• JSX语法错误：React的JSX语法中类名属性必须写为className，你代码里写的原生class属性无法被React正确解析，会导致样式绑定失效。

修正后代码 #

CSS部分 #

* {
  box-sizing: border-box;
}
.flexContainer {
  display: flex;
  flex-wrap: wrap;
}
/* Flex直接子项：仅控制布局占比 */
.flexContainer .item {
  flex: 0 0 50%;
  padding: 5px;
}
/* 内部内容卡片：单独控制视觉样式，与布局类名隔离 */
.flexContainer .itemContent {
  width: 100%;
  padding: 12px;
  border: 1px solid aqua;
  text-align: center;
}
.itemTitle {
  margin: 8px 0;
}

React JSX部分 #

<div className="flexContainer">
  {productList.map(p => {
    const alreadyAdded = cartList.some(item => item.id === p.id);
    return (
      <div key={p.id} className="item">
        <div className="itemContent">
          <p className="itemTitle">{p.title}</p>
          <p>售价：¥{p.price}</p>
          <button onClick={() => addItem(p)}>
            {alreadyAdded ? "Add again" : "Add to Cart"}
          </button>
        </div>
      </div>
    )
  })}
</div>

关键修改说明 #

• 移除了重复定义的item样式，删除了写死的500px固定宽度，避免覆盖flex布局规则
• 将所有JSX中的class属性替换为React要求的className，保证样式能正确挂载到DOM节点
• 拆分布局类和内容类：外层flex直接子项仅保留布局相关样式，内层内容使用独立类名控制视觉效果，避免嵌套样式冲突
• 调整flex属性为flex: 0 0 50%，强制每个子项基础宽度为容器的50%，不会被内部内容拉伸撑破布局，配合全局box-sizing: border-box，内边距和边框都会被算入50%宽度内，不会出现宽度溢出导致的异常换行。

内容的提问来源于stack exchange，提问作者user19318429