本文详解如何利用 Flexbox 的嵌套与 justify-between + flex-wrap 组合，让四个独立文本块自动分布于容器的左上、右上、左下、右下四角，同时避免重叠、响应式适配且无需绝对定位。
本文详解如何利用 flexbox 的嵌套与 `justify-between` + `flex-wrap` 组合，让四个独立文本块自动分布于容器的左上、右上、左下、右下四角，同时避免重叠、响应式适配且无需绝对定位。
在构建响应式表单或信息卡片时，常需将多个字段（如标签、数值、状态）精准布局于容器四角——例如左上显示标题、右上显示图标、左下显示时间、右下显示操作按钮。但若强行用两个独立的 flex-col 列（如原问题中左右各一列），由于两列无共享垂直轴线，justify-between 仅在各自列内生效，无法协同拉伸以“撑满整个容器高度”，导致上下元素间距不均、视觉失衡。
核心思路：放弃“左右分列”的结构，改用单层 Flex 容器 + flex-wrap + 合理宽度控制，让四个 在同一 flex 上下文中按行流式排列，并通过 justify-content: space-between 与 align-content: space-between（配合 flex-wrap: wrap）实现真正的四角分布。
✅ 正确实现代码如下（基于 Tailwind CSS，兼容现代浏览器）：
<div class="flex bg-blue-500 min-h-[6rem]">
<div class="flex w-full flex-wrap justify-between content-between">
<!-- 左上 -->
<span class="w-1/2 max-w-xs bg-blue-200 px-2 py-1 text-sm">
This long content should be on the top left corner, it is long to illustrate my point...
</span>
<!-- 右上 -->
<span class="w-1/2 max-w-xs bg-blue-200 px-2 py-1 text-sm text-right">
This is on the top right corner
</span>
<!-- 左下 -->
<span class="w-1/2 max-w-xs bg-blue-200 px-2 py-1 text-sm">
This should be on the bottom left corner
</span>
<!-- 右下 -->
<span class="w-1/2 max-w-xs bg-blue-200 px-2 py-1 text-sm text-right">
This should be at the bottom right corner
</span>
</div>
</div>
? 关键解析：
- flex-wrap: wrap：允许子项换行，为两行布局奠定基础；
- justify-between：使第一行（左上+右上）水平两端对齐，第二行（左下+右下）同理；
- content-between：这是垂直方向的“justify-between” —— 它作用于多行 flex 容器，将行与行之间均匀分配剩余高度，从而自然拉开上下两行距离，实现四角锚定；
- w-1/2：确保每行恰好容纳两个等宽项；max-w-xs 防止超长文本无限撑宽，提升可读性；
- 无需 height: 100% 或 h-full：只要父容器有明确高度（如 min-h-[6rem]），content-between 即可生效。
⚠️ 注意事项：
- content-between 仅在 flex-wrap: wrap（或 wrap-reverse）时有效，单行 flex 中无效；
- 所有子项必须属于同一个 flex 容器，跨容器无法参与 content-* 对齐；
- 若需更精细控制（如不同项高度差异大），可结合 align-self: flex-start/flex-end 微调单个项目垂直对齐；
- 不推荐使用 position: absolute 实现四角——虽简单，但会脱离文档流，丧失自动避让（collision detection）、响应式回流及无障碍语义支持。
总结：四角布局的本质不是“定位”，而是“空间分配”。Flexbox 的 content-between 提供了被长期低估却极其强大的垂直多行对齐能力。掌握它，即可在不牺牲可维护性与可访问性的前提下，优雅解决各类“角落锚定”需求。
