为何.right-content无法堆叠在上方div下方？Flex布局求助

嘿，我完全懂你遇到的困扰——当左侧left-content内容过长时，原本应该堆叠在一起的两个.right-content元素被挤到了下方，没法稳定待在右侧区域里。这本质是因为默认的Flex布局是横向排列直接子元素，当空间不足时，没有给右侧元素预留出稳定的垂直堆叠空间。

下面给你两种简单有效的解决方案：

方法一：给右侧元素添加容器（最直观推荐） #

这是最容易理解和维护的方案，把两个.right-content包裹在一个独立容器里，让Flex容器只处理left-content和这个右侧容器两个直接子元素。这样无论左侧内容多长，右侧容器都会占据自己的专属区域，内部的元素自然就能垂直堆叠了。

修改后的代码示例： #

<div class="wrap">
  <div class="content">
    <div class="left-content">这里可以放超级长的内容，比如Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</div>
    <div class="right-container">
      <div class="right-content">社交图标1</div>
      <div class="right-content">社交图标2</div>
    </div>
  </div>
</div>

div { border: 1px solid; } 
.wrap { margin: 0 auto; max-width: 800px; overflow: hidden; } 
.content { display: flex; }
/* 让左侧内容自适应剩余空间 */
.left-content { flex: 1; }
/* 给右侧容器设置固定宽度，避免被压缩 */
.right-container { flex-basis: 120px; flex-shrink: 0; }
/* 可选：给右侧内部元素加间距 */
.right-content { margin-bottom: 8px; }

方法二：利用Flex换行与排序（无需额外容器） #

如果你不想添加额外的HTML容器，可以通过flex-wrap: wrap和order属性来强制元素排列逻辑：

.content { display: flex; flex-wrap: wrap; }
/* 左侧占70%宽度，空间不足时自动换行 */
.left-content { flex: 1 1 70%; }
/* 右侧每个元素占30%宽度 */
.right-content { flex: 1 1 30%; }
/* 强制第二个右侧元素排在第一个后面 */
.right-content:last-child { order: 3; }

不过这种方法需要精确控制宽度比例，当内容或容器尺寸变化时可能需要调整，稳定性不如第一种方法。

关键原理总结： #

Flex布局的核心是处理直接子元素的排列，把需要堆叠的元素放在同一个子容器里，就能让Flex只负责大区域的空间分配，内部的堆叠交给默认的块级布局处理，这样就不会出现元素被挤错位的问题啦。

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