Tailwind Flex布局下如何让价格p标签居行尾对齐？

你当前的问题出在对justify-end的使用上——这个类是作用于flex容器的，不能直接用在子元素上让它对齐到行尾。要实现价格标签靠右对齐，只需给价格对应的<p>标签添加ml-auto类，利用Flex布局的自动margin特性将其推到行尾。

修改后的代码如下：

<div className="flex flex-col w-full mb-3">
  <div className="flex flex-row w-full items-center">
    {Vege && <p className="mr-1 text-sm leading-6 text-green-500">VÉGÉ • </p>}
    <p className="font-bold">{Titre}</p>
    <p className="ml-auto">{Prix} €</p>
  </div>
  <p>{Description}</p>
</div>

关键调整说明： #

• ml-auto：为价格标签设置自动左外边距，会自动填充父容器中剩余的可用空间，从而将元素挤到行的最右侧
• 可选添加items-center：给父flex容器加上这个类，能让所有子元素在垂直方向居中对齐，优化视觉效果
• 简化冗余判断：原代码中Vege ? "VÉGÉ • " : ""可以直接写成"VÉGÉ • "，因为已经通过Vege &&判断了条件为真

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