本文详解如何利用 Tailwind 的 justify-between 工具类，在 Flex 容器中将两个子元素分别精准定位至父容器的最左端和最右端，避免常见类名误用（如 justify-start/justify-end 单独使用无效），并提供可直接运行的代码示例与关键注意事项。
本文详解如何利用 tailwind 的 `justify-between` 工具类，在 flex 容器中将两个子元素分别精准定位至父容器的最左端和最右端，避免常见类名误用（如 `justify-start`/`justify-end` 单独使用无效），并提供可直接运行的代码示例与关键注意事项。
在 React 组件中使用 Tailwind CSS 实现“一端一个元素”的布局需求（例如页眉中的 logo 在左、用户头像在右），核心在于正确理解 Flex 布局的 justify-content 行为。关键误区是：justify-start 和 justify-end 是单个元素的对齐指令，但它们必须作用于 容器 上才能影响其子项；而单独给子元素添加这些类（如 <div className="justify-start">）完全无效——因为子元素自身不是 Flex 容器，这些类无处生效。
正确的做法是：将父容器设为 Flex，并使用 justify-between 类。该类对应 CSS 的 justify-content: space-between，它会自动将第一个子元素推至主轴起点（左），最后一个子元素推至主轴终点（右），中间留出均匀空白（若仅有两个子元素，则空白即为二者间距）。
✅ 正确实现代码如下：
const Header = () => {
return (
<div className="flex flex-row justify-between border-4 border-indigo-600 h-12 items-center px-4">
<div className="font-bold text-gray-800">Logo</div>
<div className="bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center">
?
</div>
</div>
);
};? 重要说明与最佳实践：
立即学习“前端免费学习笔记（深入）”；
- justify-between 要求父容器必须启用 Flex（即含 flex 类），且子元素数量 ≥ 2；若仅有一个子元素，它将默认居左（因无“之间”可分）。
- 如需垂直居中（如让文字与图标在高度方向对齐），添加 items-center（对应 align-items: center）。
- 建议配合 px-4 等内边距类避免内容紧贴边框，提升视觉舒适度。
- 避免混用旧式类名（如 justify-content 是 CSS 属性名，非 Tailwind 类；Tailwind 中应为 justify-between）。
? 总结：两端对齐不是“分别设置左右”，而是“由容器统一分配空间”。牢记口诀：“父设 flex + justify-between，子无需额外对齐类” —— 简洁、可靠、符合 Tailwind 设计哲学。
