CSS Flex - 使用 TailwindCSS 设置相同的宽度

Posted 2023-03-06

【中文标题】CSS Flex - 使用 TailwindCSS 设置相同的宽度

【英文标题】：CSS Flex - Set same width with TailwindCSS

【发布时间】：2021-07-02 14:59:39

【问题描述】：

我有以下 React 代码（+Tailwind CSS）：

<section className="flex flex-col items-center">
      managers.map((manager) => (
        <UserCard user=manager />
      ))

      <section className="flex flex-row">
        coWorkers.map((coWorker) => (
          <UserCard user=coWorker isMarked=user.id === coWorker.id />
        ))
      </section>

      engineers.map((engineer) => (
        <UserCard user=engineer />
      ))
    </section>

虽然 UserCard 很简单：

export default function Error( user, isMarked : Props) 
  return (
    <article
      className=`bg-purple-500 shadow-lg m-3 p-3 text-white rounded-lg $
        isMarked && "border-4 border-purple-800 font-bold"
      `
    >
      <h1>
        user.firstName user.lastName
      </h1>
      <h2>user.email</h2>
    </article>
  );

问题：卡片宽度不同，例如：

知道如何使用 tailwindcss 确保它们的宽度相同吗？ （在每一行/列中）

【参考方案1】：

您可以指定主 div 的固定宽度

flex flex-col items-center w-1/3

那么对于每个孩子都有全宽

bg-purple-500 shadow-lg m-3 p-3 text-white rounded-lg w-full