如何用CSS Flex实现特定Div换行布局？附代码示例

嘿，我来帮你搞定这个布局需求！你想要第三个带长文本的div，在文本框位置换行后，剩余内容跑到第一个div的下方，这个效果用浮动布局其实最直接，当然也可以尝试Flex结合一些技巧，不过先给你最容易实现的方案：

方案1：浮动布局（推荐，完美匹配需求） #

这种方法利用CSS浮动的文本环绕特性，让前两个元素左浮，第三个元素的文本自然环绕它们，正好符合你要的效果：

HTML结构 #

<div class="parent">
  <div class="box1">Box 1</div>
  <input type="text" class="input-field" placeholder="Type something...">
  <div class="box3">这是一段很长很长的文本，当它到达输入框的右侧边缘时，会自动换行到第一个div的下方继续显示，而不是只在自己的区域内换行。试试拉长或缩短浏览器窗口，看看效果变化~</div>
</div>

CSS样式 #

.parent {
  width: 100%;
  max-width: 600px; /* 可选，限制容器宽度方便看效果 */
}

.box1 {
  float: left;
  margin-right: 10px;
  padding: 8px 12px;
  background: #e0f7fa;
}

.input-field {
  float: left;
  margin-right: 10px;
  padding: 8px;
}

.box3 {
  /* 清除浮动影响，确保容器能正确包裹内容 */
  overflow: hidden;
  padding: 8px;
  background: #fce4ec;
}

效果说明

• 第一个div和输入框左浮动，第三个div的文本会先填充它们右侧的空间，当空间不够时，自动换行到第一个div的下方继续显示，完全符合你的需求。
• 用overflow: hidden清除浮动，避免父容器高度塌陷。

方案2：Flex布局（近似实现） #

因为Flex是一维的线性布局，原生不太支持文本环绕的效果，但可以通过拆分文本或者结合flex-wrap和order属性，模拟类似的效果（不过这种方法需要文本可以拆分，不如浮动灵活）：

HTML结构（需要拆分长文本） #

<div class="parent">
  <div class="box1">Box 1</div>
  <input type="text" class="input-field" placeholder="Type something...">
  <div class="box3-part1">这是一段很长很长的文本，当它到达输入框的右侧边缘时，</div>
  <div class="box3-part2">会自动换行到第一个div的下方继续显示，而不是只在自己的区域内换行。</div>
</div>

CSS样式 #

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 600px;
  gap: 10px; /* 元素间距 */
}

.box1 {
  padding: 8px 12px;
  background: #e0f7fa;
}

.input-field {
  padding: 8px;
}

.box3-part1 {
  flex: 1; /* 占据剩余空间 */
  padding: 8px;
  background: #fce4ec;
}

.box3-part2 {
  order: 1; /* 让这部分跑到box1下方 */
  flex-basis: 100%;
  padding: 8px;
  background: #fce4ec;
}

注意事项

• 这种方法需要手动拆分长文本，适合文本内容固定的场景，如果是动态文本就不太方便了。
• 通过order属性让第二部分文本排在最下方，flex-basis: 100%让它占满整行。

总结一下，如果你需要动态的文本环绕效果，浮动布局是最优解；如果一定要用Flex，只能通过拆分文本模拟近似效果。

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