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

Posted 2023-03-06

【中文标题】如何在 Tailwind 中垂直使用 justify-between？

【英文标题】：How to use justify-between vertically with Tailwind?

【发布时间】：2021-08-26 13:02:27

【问题描述】：

我有一个不知道高度的 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

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

【参考方案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>

【讨论】：

你可以添加类h-full，而不是height:100vh。

我想这是因为 div 是块元素，它自然会水平扩展以填充其容器。但是，在 flex-col 模式下，div 仍然水平“表现”，即。它仍然水平扩展，而不是垂直扩展，在某种程度上改变了 flex-col 和 justify-between 的预期行为