css flexbox / tailwind 'simple' 对齐没有像我预期的那样工作

Posted 2023-03-07

【中文标题】css flexbox / tailwind \'simple\' 对齐没有像我预期的那样工作

【英文标题】：css flexbox / tailwind 'simple' alignment not working as I expectcss flexbox / tailwind 'simple' 对齐没有像我预期的那样工作

【发布时间】：2021-03-31 21:05:01

【问题描述】：

我正在尝试创建一个包含 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>

【参考方案1】：

（编辑：我正在查看tailwind content-end 类的第一个搜索结果，这是错误的，哈哈，但其余的仍然存在）

所以align-items 用于跨多个 flex 子级共享垂直对齐或align-self 用于每个子级具有不同的设置。 https://tailwindcss.com/docs/align-self 尝试改用 align-self 并将 flex 类移动到两个部分的父 div 上，例如带有.w-1/3的div

【讨论】：

谢谢，“对齐内容”是我缺少的顺风工具。