如何使用 Tailwind 垂直对齐？

Question

我有一个不知道高度的 flex-col 容器。我应该能够在容器中使用 justify- Between 来分隔两个 div，一个到 div 的顶部，一个到底部，因为它的主轴被定义为垂直，并且 justify- Between 用于“对齐项目”根据文档，沿着容器\xe2\x80\x99s 主轴\'。

\n

此代码水平工作：

\n

<div class="w-screen h-screen bg-blue-200">\n    <div class="flex justify-between">\n        <div>1</div>\n        <div>3</div>\n    </div>\n</div>\n

\n

但是，如果我们将第二个 div 更改为“flex-col”，则 justify- Between 将无法沿垂直轴工作。为什么是这样？

\n

<div class="w-screen h-screen bg-blue-200">\n    <div class="flex flex-col justify-between">\n        <div>1</div>\n        <div>3</div>\n    </div>\n</div>\n

\n

游乐场在这里： https://play.tai​​lwindcss.com/41DdUFN3Fw

\n

请问我怎样才能实现这个目标？

\n

Answer 1

它仅在元素高度增加时才起作用：

<div class="w-screen h-screen bg-blue-200">
    <div class="flex flex-col justify-between" style="height:100vh">
        <div>1</div>
        <div>3</div>
    </div>
</div>