TailwindCSS中justify-self-end失效：实现图片居中+导航按钮居右

问题出在justify-self-end在flex布局中不生效——这个属性是为Grid布局设计的，flex容器里的子元素没法用它来控制自身对齐。要实现图片居中、按钮靠右的效果，用以下两种方法都可以：

方法一：给按钮添加自动左外边距（最简便） #

修改代码如下：

<nav class="px-6 py-4">
  <div class="flex items-center justify-center">
    <div>
      <img class="h-12" src="https://www.applesfromny.com/wp-content/uploads/2020/06/SnapdragonNEW.png"> 
    </div>
    <button class="ml-auto">
      <i class="fa-solid fa-bars fa-xl"></i>
    </button>
  </div>
</nav>

• 给按钮加上ml-auto（margin-left:auto），它会自动占据容器中图片右侧的所有剩余空间，从而被“推”到页面最右侧。
• 父容器的justify-center保证图片在剩余空间里居中，两者配合刚好实现需求。

方法二：用flex布局的space-between配合占位元素 #

如果需要更灵活的布局，可以在图片左侧加一个空的占位元素，和按钮对称，然后父容器用justify-between：

<nav class="px-6 py-4">
  <div class="flex items-center justify-between">
    <div></div> <!-- 左侧占位 -->
    <div>
      <img class="h-12" src="https://www.applesfromny.com/wp-content/uploads/2020/06/SnapdragonNEW.png"> 
    </div>
    <button>
      <i class="fa-solid fa-bars fa-xl"></i>
    </button>
  </div>
</nav>

• 父容器的justify-between会让三个子元素均匀分布在容器里，左右两个占位/按钮撑满两侧，自然让中间的图片居中。

另外注意：图片上的flex类是多余的，直接保留h-12即可，因为它已经在flex容器的子元素里了。

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