Tailwind CSS flex布局下含logo时按钮垂直拉伸如何解决

问题原因 #

这个异常不是logo占用空间过大导致的，核心原因是Flex布局默认的align-items: stretch规则：所有flex子项默认会被拉伸到和容器交叉轴（垂直方向）最高的子项一样高。
当你在按钮同级放了锁形logo，如果logo本身的渲染高度高于按钮的默认高度，同容器内的按钮就会被强制拉到和logo等高，出现你看到的拉伸变形；删掉logo后容器内最高元素就是按钮本身，自然就恢复正常样式了。

相关代码 #

<nav font-am class="m-6 text-xl">
      <div class="flex flex-row justify-between container">

        <div>
          <img src="./img/Logo.png">
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/AccountLog.png"></a>
          <p class="hidden md:flex">My Account</p>
        </div>

        <div class="flex flex-row">
          <a href="#"><img src="./img/love_symbol.png"></a>
          <p class="hidden md:flex">My List</p>
        </div>

        <div class="flex box-border flex-row">
          <a href="#"><img src="./img/LockLogo.png"></a>
          <button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
        </div>

      </div>
    </nav>

效果对比 #

• 保留logo时按钮异常拉伸：
• 删除logo后按钮显示正常：

修复方法 #

两种方案二选一即可，优先推荐第一种，整体布局更协调：

• 方案1：给包裹logo和按钮的flex容器添加items-center类，覆盖默认的stretch对齐规则，让容器内所有子项垂直居中对齐，同时可以加gap-2给logo和按钮留出合适间距，避免元素贴在一起：

  <!-- 修改后的容器代码 -->
  <div class="flex box-border flex-row items-center gap-2">
    <a href="#"><img src="./img/LockLogo.png"></a>
    <button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
  </div>
  

• 方案2：如果不想调整整个容器的对齐规则，可以单独给按钮添加self-center类，让按钮自身不受容器拉伸规则影响：

  <button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full self-center" role="button">Sign In</button>
  

额外优化建议：建议给导航栏所有图标img标签统一加上固定尺寸类（比如h-6 w-auto），约束图标渲染大小，从根源上避免图标尺寸不受控撑高容器导致的各类布局错位问题。

内容的提问来源于stack exchange，提问作者Trung Kiên Lê