css flexbox / tailwind“简单”对齐无法按我的预期工作

Question

我正在尝试创建一个包含 4 个部分的简单部分 - 左上、左下、右上和右下。我无法做一些看似非常简单的事情。也就是说，我希望右上角的元素在其部分中中间对齐（垂直），右下角的元素在其部分中底部对齐（垂直）。我不明白以下不起作用的原因。谢谢。

<div class="w-full bg-white border-gray-200 rounded-lg shadow">

  <div class="flex h-full">
    <div class=" w-2/3 border-r border-gray-500">

      <div class="bg-red-50 p-4">
        <div class="h-20">
          top left section
        </div>
      </div>

      <div class="bg-gray-50 p-4">
        bottom left section
      </div>
    </div>

    <div class="w-1/3">
      <div class="bg-green-50 flex content-center p-4">
        <div class="block">
        <!-- I want this guy to be vertically middle aligned -->
          top right section
        </div>
      </div>

      <div class="bg-gray-50 flex content-end p-4">
        <div class="block">
          <!-- I want this guy to be vertically bottom aligned -->
          bottom right section
        </div>
      </div>

    </div>

  </div>

</div>

Answer 1

（编辑：我正在查看顺风内容结束类的第一个搜索结果，这是错误的，哈哈，但其余的仍然有效）

因此

align-items

可以在多个 Flex 子项之间共享垂直对齐，或者

align-self

可以为每个子项提供不同的设置。 https://tailwindcss.com/docs/align-self 尝试使用

align-self

并将 Flex 类移动到两个部分的父 div 上，例如带有

.w-1/3

的 div

Answer 2

问题在于您如何使用 Flex 和对齐实用程序。具体来说，内容中心和内容结束不会按照您期望的方式应用垂直对齐。相反，您应该使用 items-center 垂直居中，使用 items-end 与弹性容器内的底部对齐。可以通过以下方式实现：

1. 将右上角的 content-center 替换为 items-center 容器 '（）'。添加 h-40 以赋予其高度，从而允许 垂直居中。将 content-end 替换为 items-end 右下部分的容器将内容与底部对齐。 再次添加 h-40 以创建足够的垂直空间用于对齐。