React中flex容器图片仅垂直排列无法横向显示该如何修正？

问题原因 #

1. CSS配置错误
   当前.flex-container的flex-direction属性设置为column，该配置会强制容器直接子元素沿垂直方向排列；同时flex-wrap: no-wrap属于拼写错误，正确取值为nowrap；另外flex-basis是Flex子项属性，写在父容器上不会生效。
2. JSX结构不符合Flex布局规则
   Flex布局仅对容器的直接子元素生效，你当前代码中.flex-container的直接子元素是一层额外的div，所有遍历生成的商品内容都被包裹在这层div内部，Flex规则无法作用到每个商品模块上。同时你用React Fragment包裹单个商品的图片、标题、价格，会导致这些元素作为同级节点插入，即便去掉外层多余div也无法实现一个商品对应一个布局单元的效果。

修复方案 #

1. 调整CSS代码 #

.wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.flex-container
{
    display: flex;
    flex-wrap: wrap; /* 一行放不下时自动换行，不需要换行可改为nowrap */
    flex-direction: row; /* 子元素沿水平方向排列 */
    gap: 16px; /* 可选：配置商品卡片之间的间距 */
}

/* 新增商品子项样式 */
.product-item {
    flex-basis: 25%; /* 每个商品占容器25%宽度，对应你之前错误写在父容器的flex-basis配置 */
}

2. 调整JSX结构 #

<div className="wrapper">
  <div className="flex-container">
    {products && products.map(((prod, index) => {
      return (
      {/* 替换Fragment为单独的商品容器div，作为flex容器的直接子项 */}
      <div key={index} className="product-item">
        <img style={{ width: "200px", height: "200px" }} src={`images/${prod.img}`} alt={prod.productName} />
        <h4>{prod.productName}</h4>
        <p>{prod.price}</p>
      </div>
      );
      }))}
  </div>
</div>

注：map遍历生成的列表元素需要添加唯一key属性，生产环境推荐使用商品唯一id代替index作为key值。

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