React实现子元素两端对齐布局技巧

正确的做法是：将父容器设为 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 设计哲学。

本篇关于《React实现子元素两端对齐布局技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！