React JS中如何用flex让map遍历组件同行排列实现每行3个商品

你当前的布局异常是因为flex容器的位置写错了：把设置了flex属性的包裹容器放在了map遍历逻辑内部，每遍历一个商品项就会生成一个独立的flex父容器，每个容器内仅包含1个商品卡片，自然无法实现多商品同行排列的效果。

• 调整JSX结构：将flex布局的外层包裹容器移动到map遍历的外层，保证整个商品列表区域只生成1个flex容器，所有遍历出来的商品卡片都作为这个容器的直接子元素。
  错误结构参考：

  // 错误：容器在循环内，每个商品单独占一个容器
  {productList.map(item => (
    <div className="product-wrap">
      <ProductCard data={item} />
    </div>
  ))}
  

  正确结构参考：

  // 正确：flex容器仅在外层渲染一次
  <div className="product-wrap">
    {productList.map(item => (
      <ProductCard data={item} />
    ))}
  </div>
  

• 调整对应SCSS样式：给外层flex容器设置换行规则，给商品卡片设置宽度占比，实现每行3个商品的效果：

  .product-wrap {
    display: flex;
    flex-wrap: wrap; // 超出3个自动换行
    gap: 24px; // 商品卡片之间的间距，可根据设计需求调整
  }
  
  .product-card {
    // 总宽度减去2个间距值后三等分，刚好一行放3个
    width: calc((100% - 48px) / 3);
    // 原有卡片的样式（圆角、阴影、内边距等）保留即可
  }
  

• 可选优化：如果需要适配移动端，可以配合媒体查询在小屏下调整卡片宽度，比如屏幕宽度小于768px时设置width: 100%实现单列展示，768px-1200px之间设置width: calc((100% - 24px) / 2)实现两列展示。

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