如何用Tailwind或CSS让Div置于水平居中元素右侧

直接通过Flex的自动margin特性，就能去掉多余的占位div，同时实现中间div水平居中、右侧div紧邻的效果，且两个div宽度可动态变化：

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

<div class="flex">
  <!-- 中间内容：通过ml-auto实现水平居中 -->
  <div class="py-10 bg-yellow-300 ml-auto">Center Me</div>
  
  <!-- 右侧内容：自然紧跟中间div，宽度随内容动态调整 -->
  <div class="bg-blue-300">
    <div>Needs to be in right of center</div>
    <div>TEXT TEXT TEXT</div>
  </div>
</div>

核心优化点： #

• 移除了左侧无意义的占位div，不需要用grow强制填充空间
• 给中间的黄色div添加ml-auto，Flex布局中margin-left:auto会自动填充左侧所有剩余空间，从而让该div水平居中
• 移除右侧div的grow类，使其宽度由内部内容决定，保持与中间div紧邻的状态
• 无论后续通过动画或按钮操作修改两个div的宽度，布局逻辑都会自动适配，无需额外调整

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