如何用Tailwind实现MongoDB映射数据每行仅显示4个元素并自动换行

云上老周

2026-7-16

解决Tailwind Flex布局下每行展示4个数据项的换行问题

你的问题出在flex容器默认不换行，加上子项固定宽度w-96，当容器宽度不足以容纳所有子项时，它们会被挤压到同一行。下面提供两种可靠的解决方案：

方案一：使用Grid布局（推荐）

Grid布局天生适合这种固定列数的场景，代码更简洁且响应式表现更好：

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 max-w-full justify-items-center">
  {products?.length > 0 &&
    products.map((product) => (
      <div className="w-96 p-4 border border-stone-800 items-center justify-center text-center rounded-md">
        <div className="flex justify-center">
          <img
            src={product.images[0]}
            alt={product.title}
            className="mapped-img"
          />
        </div>
        <p>{product.title}</p>
      </div>
    ))}
</div>

关键说明：

grid-cols-1 md:grid-cols-2 lg:grid-cols-4：小屏幕1列，中等屏幕2列，大屏幕4列，自动适配不同设备
justify-items-center：让每个子项在单元格内水平居中
gap-12：保持子项之间的间距

方案二：修改Flex布局

如果坚持用Flex，只需添加flex-wrap开启换行，并调整子项的宽度约束，确保每行能放下4个：

<div className="flex flex-wrap justify-center gap-12 max-w-full">
  {products?.length > 0 &&
    products.map((product) => (
      <div className="flex-1 min-w-[22%] max-w-[25%] p-4 border border-stone-800 items-center justify-center text-center rounded-md">
        <div className="flex justify-center">
          <img
            src={product.images[0]}
            alt={product.title}
            className="mapped-img"
          />
        </div>
        <p>{product.title}</p>
      </div>
    ))}
</div>