ReactJS：如何将JSON数据以Flex Row形式在Div中展示？（当前显示为列）

我一眼就看出问题所在啦——你现在是给每个单独的商品卡片都套了一个flex flex-row容器，这就导致每个卡片自己占满一行，自然呈现出列的效果。要实现你想要的横向排列（一行多个卡片），得把flex布局加在所有卡片的父容器上，而不是每个卡片单独设置。

这里是修改后的完整代码：

import React, { Component } from "react";
import PostData from "../data/data.json";
class Sneaker extends Component {
  state = {};
  render() {
    return (
      {/* 把flex布局移到外层容器，同时添加flex-wrap让卡片自动换行 */}
      <div className="flex flex-row flex-wrap bg-gray-400 w-2/3 mx-auto mt-10 p-4 gap-4">
        {PostData.map((postDetail) => {
          return (
            {/* 每个卡片只保留自身样式，去掉外层的flex容器 */}
            <div className="text-center w-1/4 bg-white p-3 rounded-md">
              <img className="w-64 h-64 object-contain" src={postDetail.image} alt={postDetail.name} />
              <h3 className="mt-2">{postDetail.name}</h3>
              <h3 className="text-red-500 mt-1">${postDetail.price}</h3>
            </div>
          );
        })}
      </div>
    );
  }
}
export default Sneaker;

关键修改点说明： #

• 外层容器新增flex flex-row flex-wrap：让所有卡片在同一个flex行内排列，flex-wrap保证当容器宽度不够时，卡片自动换行到下一行，不会横向溢出。
• 移除每个卡片外层的flex flex-row：卡片本身不需要flex布局，只需要作为flex容器的子元素即可。
• 额外优化：添加了gap-4来控制卡片之间的间距（比用m-2更整洁），给卡片加了rounded-md优化视觉效果，图片用object-contain避免拉伸，同时给图片alt属性加上商品名称，提升可访问性。

这样调整后，你的商品卡片就会按照横向一行多个的方式展示，和你预期的效果一致啦！

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