如何在Tailwind的flex-col容器中垂直使用justify-between？为何当前配置不生效？

嘿，这个问题其实挺常见的，我来给你好好拆解下：

为什么justify-between在垂直方向没生效？ #

当你把容器改成flex-col后，主轴确实变成了垂直方向，但这个flex容器本身没有设置高度——它的高度完全是由内部两个<div>的内容撑开的，根本没有多余的垂直空间让justify-between去分配。

你之前水平方向的例子能生效，是因为块级元素默认会占满父元素的宽度，所以flex容器有足够的水平空间来让两个元素分别靠左右两侧。但垂直方向不一样，块级元素不会自动占满父元素的高度，必须手动设置。

如何实现垂直元素分离？ #

只需要给flex容器加上一个高度类，让它能继承父元素的高度就行，比如h-full：

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

这样flex容器就会占满父元素的整个高度，垂直方向有了足够的剩余空间，justify-between就能把第一个<div>顶在顶部，第二个<div>压在底部了。

你也可以直接给flex容器加h-screen，不过用h-full更贴合语义，因为它是继承父元素的高度，避免重复设置全屏高度。

内容的提问来源于stack exchange，提问作者Ray Purchase