在 Flex 布局中，仅对子元素设置 justify-end 无法使其相对于父容器右对齐；必须配合弹性分配（如 flex: 1）让其他兄弟元素“撑满”剩余空间，才能使目标元素自然靠右。
在 flex 布局中，仅对子元素设置 `justify-end` 无法使其相对于父容器右对齐；必须配合弹性分配（如 `flex: 1`）让其他兄弟元素“撑满”剩余空间，才能使目标元素自然靠右。
你遇到的问题非常典型：在一个 flex flex-row 容器中，希望
{Prix} €
始终紧贴行尾，但直接加 justify-end 却无效——这是因为 justify-content 是容器级属性，作用于其直接子元素的整体排列，而非单个子元素的对齐方式。而你的代码中，三个标签是并列的 flex 项目，它们默认按内容宽度排列，彼此之间没有“占位竞争”，所以 justify-end 对单个
不起作用。
✅ 正确解法是：让中间标题 {Titre}
修改后的代码如下：
<div classname="flex flex-col w-full mb-3">
<div classname="flex flex-row w-full">
{Vege && (
<p classname="mr-1 text-sm leading-6 text-green-500">VÉGÉ • </p>
)}
<p classname="font-bold flex-1">{Titre}</p>
<p classname="text-right">{Prix} €</p>
</div>
<p>{Description}</p>
</div>
? 关键说明：
- flex-1 = flex: 1 1 0%，表示该元素可伸缩、优先占据剩余空间；
- 移除了价格
上无效的 justify-end（它不是 flex 容器，该类无意义）；
- 推荐改用 text-right 控制文本对齐（语义更准确），或保留 ml-auto 实现“自动外边距右推”（更符合 flex 逻辑）；
- 若需严格保持价格与右侧边界对齐且不随内容变宽，ml-auto 是更健壮的选择：
<p classname="ml-auto">{Prix} €</p>
? 小结：Flex 中的“右对齐某一项”，本质是控制该项的定位策略，而非对齐方式。常用手段包括：
- margin-left: auto（推荐 Tailwind 写法：ml-auto）→ 最简洁、兼容性好；
- flex: 0 0 auto + margin-left: auto 组合 → 更精细控制；
- 避免误用 justify-end 在非容器元素上。
掌握这一模式后，你将在导航栏、卡片标题、表单项等多处高效实现类似布局需求。
