Flexbox与TailwindCSS问题：卡片无法按预期响应式成行排列

你的问题核心是flex容器默认不换行，加上卡片的flex-1属性覆盖了宽度设置，导致中大屏下所有卡片挤在同一行。

1. 修改父容器类，添加换行属性 #

父容器需要添加flex-wrap，让超出一行的卡片自动换行，同时调整垂直对齐方式避免布局异常：

<div className="flex flex-col sm:flex-row flex-wrap justify-center gap-4 mb-10">
  {categoryPosts.map((post) => (
    <MainNewsCard key={post.id} {...post} />
  ))}
</div>

• flex-wrap：开启flex换行，这是解决卡片不换行的核心设置
• 移除items-center（可选）：如果卡片高度不一致，垂直居中会导致布局错位，换成items-start更合理

2. 移除卡片组件的flex-1属性 #

卡片的flex-1会强制子项填充剩余空间，直接覆盖你设置的md:w-1/2、lg:w-1/3宽度类，导致宽度规则失效：

<Link
  className="flex flex-col w-full md:w-1/2 lg:w-1/3 mb-8"
  to={`/post/${title}/${id}`}
>
  {/* 卡片内容 */}
</Link>

修改后的完整代码 #

卡片组件

import { Link } from "react-router-dom";

const MainNewsCard = ({ title, id, image, category }) => {
 return (
    <Link
      className="flex flex-col w-full md:w-1/2 lg:w-1/3 mb-8"
      to={`/post/${title}/${id}`}
    >
      <div className="relative overflow-hidden flex-1">
        <div
          className="h-[280px] bg-cover bg-center flex-1"
          style={{ backgroundImage: `url(${image})` }}
        ></div>
        <div className="absolute inset-0 flex flex-col justify-between p-4 text-white ">
          <div>
            <p className="text-xl font-manrope leading-normal text-color-red text-right -mt-3">
              {category}
            </p>
          </div>
        </div>
      </div>
      <div className="mx-5 mt-3">
        {/* title and description */}
      </div>
    </Link>
  );
};

export default MainNewsCard;

遍历渲染代码

<div className="flex flex-col sm:flex-row flex-wrap justify-center gap-4 mb-10">
  {categoryPosts.map((post) => (
    <MainNewsCard key={post.id} {...post} />
  ))}
</div>

效果说明 #

修改后可实现预期布局：

• 小屏（<768px）：每行1张卡片
• 中屏（768px-1023px）：每行2张卡片
• 大屏（≥1024px）：每行3张卡片

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