flex-row 和 justify-items-center 类对 Firefox 没有影响，但适用于 Chrome

Question

重现问题：

1. 按照 tailwind 文档
中所述创建项目
2. 删除 page.tsx 文件中的所有内容。
3. 粘贴以下代码：

export default function Home() {
 return (
   <div className="flex-row justify-items-center">
     <h1>MINIMAL LOL</h1>
   </div>
 );
}

这在 Chrome 上按预期工作：

但是这是 Firefox 上的结果：

在 Firefox 上检查时，flex-row 类呈灰色，悬停时显示工具提示“flex-direction 对此元素没有影响，因为它不是 Flex 容器”。

justify-items-center 也变灰并显示工具提示“justify-items 对此元素没有影响，因为它不是网格容器”。

为什么 Firefox 和 Chrome 在渲染此类时存在差异？

Answer 1

<div className="flex flex-row justify-center items-center">Your text</div>