如何在 Tailwind 中垂直使用 justify-between？

Question

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

此代码水平工作：

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

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

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

这里是游乐场：https://play.tailwindcss.com/41DdUFN3Fw

请问我怎样才能做到这一点？

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>