本文详解如何利用 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 是单个元素的对齐指令，但它们必须作用于 容器 上才能影响其子项；而单独给子元素添加这些类（如

）完全无效——因为子元素自身不是 Flex 容器，这些类无处生效。

正确的做法是：将父容器设为 Flex，并使用 justify-between 类。该类对应 CSS 的 justify-content: space-between，它会自动将第一个子元素推至主轴起点（左），最后一个子元素推至主轴终点（右），中间留出均匀空白（若仅有两个子元素，则空白即为二者间距）。

✅ 正确实现代码如下：

react-pro

你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...

下载

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 设计哲学。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！