如何用Flex布局实现容器四元素四角分布且垂直均匀填充无重叠？

要实现四个字段分别位于容器的四个角落，同时保持流式布局（不使用position:absolute），可以通过嵌套Flex布局的属性组合来实现，核心是利用flex-col和justify-between控制垂直方向的元素分布：

修改后的代码 #

<div class="flex min-h-[200px] bg-blue-500 justify-between p-4">
    <!-- 左侧区域：左上 + 左下 -->
    <div class="flex flex-col h-full justify-between w-1/3">
        <span class="bg-white/20 p-2">
            This long content should be on the top left corner, it is long to ilustrate my point with a short width so it grows more vertically
        </span>
        <span class="bg-white/20 p-2">This should be on the bottom left corner</span>
    </div>
    <!-- 右侧区域：右上 + 右下 -->
    <div class="flex flex-col h-full justify-between w-1/3">
        <span class="bg-white/20 p-2">This should be on the top right corner</span>
        <span class="bg-white/20 p-2">This should be at the bottom right corner</span>
    </div>
</div>

关键调整说明 #

• 外层容器：设置min-h-[200px]保证有足够垂直空间展示元素分布，p-4避免内容贴紧容器边缘，justify-between实现左右区域的水平分散。
• 左右子容器：flex-col将内部元素改为垂直排列，h-full让子容器占满外层容器的高度，justify-between强制内部两个span分别靠向容器的顶部和底部。
• 宽度控制：给左右子容器添加w-1/3（或自定义宽度），避免内容过宽挤压布局，同时保证左右区域有合理水平间距。

这种方案属于流式布局，元素会随容器尺寸自动调整，不会出现重叠问题，完全符合需求。

内容的提问来源于stack exchange，提问作者Christopher Poulsen