Flexbox布局中实现Float效果：将Box Three上移至Box Two下方

我懂你在桌面端Flex布局里的这个困扰——想用Flex做布局，却想让"Three"盒子像float那样贴在"Two"的正下方，Flex默认的流式排列确实会跟我们的预期打个小岔。

刚好有个高度相似的问题讨论过这类场景，里面有不少实用思路，但我这次给你的方案是那个问题里没提到的，你可以根据自己布局的复杂程度选最顺手的。

方案：嵌套Flex容器实现垂直堆叠 #

如果你的核心需求是让"Two"和"Three"始终保持上下排列，同时和左边的"One"并列，最直接且易维护的方式是把这两个盒子嵌套到一个子Flex容器里：

HTML结构

<div class="main-flex">
  <div class="box one">One</div>
  <div class="side-flex">
    <div class="box two">Two</div>
    <div class="box three">Three</div>
  </div>
</div>

CSS样式

.main-flex {
  display: flex;
  gap: 1.5rem; /* 控制左右两个区块的间距，按需调整 */
  align-items: flex-start; /* 让左右容器顶部对齐，避免默认的拉伸对齐 */
}

.side-flex {
  display: flex;
  flex-direction: column; /* 让内部的Two和Three垂直排列 */
  gap: 1rem; /* 控制Two和Three之间的上下间距 */
  flex: 1; /* 让右侧容器占满剩余的可用宽度 */
}

.box.one {
  flex: 0 0 250px; /* 固定左边盒子的宽度，根据你的设计需求修改数值 */
}

这个方案完全利用Flex的原生特性，不需要依赖float（毕竟Flex和float本来就不太兼容），结构也很清晰。如果要做响应式调整，比如移动端要改成垂直排列，只要给.main-flex加个媒体查询，把flex-direction改成column就行，非常灵活。

如果你的布局有更复杂的动态高度需求（比如One的高度可能超过Two+Three的总和，或者需要Three在特定条件下调整位置），也可以试试用order属性配合媒体查询，但嵌套容器的方式在大多数场景下都是更直观、更不容易出问题的选择。

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