Tailwind双列布局：首元素左对齐、次元素右对齐实现方法咨询

一、Grid布局方案 #

通过两列网格配合元素自身的对齐属性实现：

• 容器添加 grid grid-cols-2 w-full 创建占满宽度的两列网格
• 第一个元素用 justify-self-start 左对齐，第二个元素用 justify-self-end 右对齐

代码示例：

<div class="grid grid-cols-2 w-full">
  <button class="justify-self-start">Button1</button>
  <button class="justify-self-end">Button2</button>
</div>

二、Flex布局方案（更推荐） #

Flex布局是实现这种两端对齐场景的更简便选择：

• 容器添加 flex justify-between w-full，justify-between 会自动将子元素分别推到容器两端
• 无需给单个元素额外加对齐类，如需控制元素间距，可搭配 gap-x-* 类（比如 gap-x-4）

代码示例：

<div class="flex justify-between w-full gap-x-4">
  <button>Button1</button>
  <button>Button2</button>
</div>

三、Auto Grid灵活方案 #

如果需要更灵活的网格列宽控制，可以使用自动网格：

• 容器添加 grid auto-cols-fr w-full
• 同样给元素分别设置 justify-self-start 和 justify-self-end

代码示例：

<div class="grid auto-cols-fr w-full">
  <button class="justify-self-start">Button1</button>
  <button class="justify-self-end">Button2</button>
</div>

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