tailwind css使一行元素两端对齐的方法

在进行网页布局的时候，经常会出现一行中的两个元素一个靠左，一个靠右的场景，这种情况下可以接入tailwind CSS的一些类来实现这样的需求。下面介绍两种方法：

方法1：使用 Flexbox + justify-between

利用tailwind css中的 flex 创建弹性容器，然后利用justify-between 会让子元素在主轴（默认横向）两端对齐即可实现。

<div class="flex justify-between bg-gray-100 p-4 mb-4">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">左边按钮</button>
  <button class="bg-green-500 text-white px-4 py-2 rounded">右边按钮</button>
</div>

方法2：使用 ml-auto 推动右侧元素

ml-auto 通过 margin-left: auto 将右侧元素推到容器最右边。这种方案比较灵活，适用于左侧有多个元素或需要更精细控制的情况。

<div class="flex bg-gray-100 p-4">
  <button class="bg-blue-500 text-white px-4 py-2 rounded">左边按钮</button>
  <button class="ml-auto bg-green-500 text-white px-4 py-2 rounded">右边按钮</button>
</div>