justify-between类工作正常，因为它只负责在其子类之间添加相等的空间。它看起来很坏，因为边界div的大小不一样。要解决这个问题，你可以简单地使它们大小相同。下面是一个例子，我使用flex-1属性使它们变大。

<!-- dependencies -->
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com"></script>

<!-- App -->
<div class="flex h-[100vh] flex-col">
  <!-- Header -->
  <div class="flex w-full justify-between  bg-[#404040] p-2">
    <div class="flex flex-1 gap-3">
      <div class="flex cursor-pointer items-center gap-2 rounded-md bg-[#5b5e64] p-1.5 px-8 text-[#e3e2e5]">
        <i class="fa-solid fa-file"></i>
        <div>File</div>
      </div>
      <div class="flex cursor-pointer items-center gap-2 rounded-md bg-[#5b5e64] p-1.5 px-8 text-[#e3e2e5]">
        <i class="fa-solid fa-file"></i>
        <div>Preview</div>
      </div>
    </div>
      <!-- No center Horizontal -->
      <div class="flex w-40  items-center rounded-md bg-[#5b5e64] text-[#e3e2e5]">
        <div class="flex h-full w-[50%] cursor-pointer items-center justify-center rounded-md bg-blue-600 text-center text-xl">
          <i class="fa-solid fa-desktop"></i>
        </div>
        <div class="flex h-full w-[50%] cursor-pointer items-center justify-center rounded-md text-center text-xl">
          <i class="fa-solid fa-mobile-screen-button"></i>
        </div>
      </div>

    <div class="text-white flex-1">test</div>
  </div>
</div>