居中对齐一个元素并右对齐第二个元素 - Tailwind CSS

Question

我附上了我想要实现的目标的粗略想法，虚线代表容器的中心。我试图将一个 div 元素居中对齐，然后将同一行中的第二个 div 右对齐，同时两个元素都水平居中。

Answer 1

尝试这样：

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex items-center justify-center border border-dashed">
  <div class="flex-1"></div>
  <div class="w-32 h-32 bg-red-500"></div>
  <div class="flex-1">
    <div class="w-20 h-20 bg-green-500 ml-auto"></div>
  </div>
</div>

带网格：

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center border border-dashed">
  <div></div>
  <div class="w-32 h-32 bg-red-500"></div>
  <div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>