如何使用Tailwind CSS实现导航栏元素的左、中、右分布布局？

需求 #

作为Web开发新手，使用Tailwind CSS设计网页时，希望导航栏元素按以下方式分布：

• Corner Hair Salon 左对齐
• Home、Appointments 居中
• Sign-In 右对齐

当前代码实现的效果不符合预期，现有代码如下：

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex bg-black h-12 items-center space-x-11">
      <nav class="">
        <span>
          <a
            class="text-white text-3xl font-bold hover:text-gray-300 hover:underline"
            href="#"
            >Corner Hair Salon/a
          >
        </span>
        <span>
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Home</a
          >
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >About</a
          >
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Appointments</a
          >
        </span>
        <span>
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Sign-In</a
          >
        </span>
      </nav>
    </div>

当前页面效果：所有导航元素挤在一起，未实现左、中、右的分布效果。

解决方案 #

问题分析 #

1. nav标签未启用Flex布局，无法控制内部元素的空间分布
2. 外层div的space-x-11作用对象错误，没有实际布局意义
3. Corner Hair Salon对应的<a>标签未正确闭合（缺少>）
4. 未给三个导航区块分配空间权重，无法实现左中右对齐

修改后的代码 #

<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-black h-12 flex items-center px-4">
  <nav class="flex w-full">
    <!-- 左侧品牌：左对齐 -->
    <div class="flex-1 flex items-center">
      <a class="text-white text-3xl font-bold hover:text-gray-300 hover:underline" href="#">
        Corner Hair Salon
      </a>
    </div>
    <!-- 中间导航：居中对齐 -->
    <div class="flex-1 flex items-center justify-center space-x-8">
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Home</a>
      <!-- 若不需要About可直接删除此标签 -->
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">About</a>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Appointments</a>
    </div>
    <!-- 右侧登录：右对齐 -->
    <div class="flex-1 flex items-center justify-end">
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Sign-In</a>
    </div>
  </nav>
</div>

代码说明 #

• 给nav添加flex w-full，让它占满父容器宽度并启用Flex布局
• 三个导航区块都添加flex-1，平分父容器的宽度
• 左侧区块默认左对齐，中间区块用justify-center实现居中，右侧区块用justify-end实现右对齐
• 中间区块用space-x-8给导航项添加水平间距，可根据需求调整数值
• 修复了<a>标签的闭合错误
• 给外层div添加px-4，避免导航元素贴边

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