如何利用Flexbox将元素定位至flex-between容器指定元素正下方？

当然可以实现这个需求！核心思路是让第二个容器复刻第一个容器的Flex布局结构，用不可见的占位元素填充多余位置，这样目标元素就能自动和第一个容器的第三个元素对齐——完全不需要计算间距，适配任何容器宽度和元素数量。

具体实现步骤 #

• 保持两个容器的Flex布局参数完全一致（尤其是justify-content: space-between和宽度）
• 在第二个容器中，用和第一个容器元素数量相同的占位元素填充，只让目标元素显示

代码示例 #

CSS 部分

/* 第一个容器：原Flex布局 */
.container-top {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 自适应宽度，也可以是固定值 */
  margin-bottom: 1.5rem;
}

.container-top .item {
  /* 元素样式，宽度可以固定或自适应 */
  min-width: 80px;
  height: 50px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 第二个容器：复刻布局，用占位元素对齐 */
.container-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 和第一个容器宽度完全一致 */
}

/* 占位元素：透明化，不占据视觉空间但保留布局位置 */
.container-bottom .placeholder {
  opacity: 0;
  min-width: 80px; /* 和第一个容器的元素宽度匹配（如果是固定宽），自适应的话可以省略 */
}

/* 目标元素：需要对齐的元素 */
.container-bottom .target {
  min-width: 80px;
  height: 50px;
  background: #ef4444;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML 部分

<div class="container-top">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

<div class="container-bottom">
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div class="target">对齐到3的下方</div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>

为什么这个方法有效？ #

justify-content: space-between的布局逻辑是：将容器内的元素均匀分布，首尾元素贴边，剩余空间平均分配到元素之间的间隙。当两个容器的宽度、元素数量、Flex参数完全一致时，每个位置的元素（包括占位元素）都会被分配到完全相同的水平坐标——不管容器宽度怎么变化，对齐关系都会自动保持。

扩展：如果元素数量动态变化？ #

如果第一个容器的元素数量是动态生成的，可以用JS来自动生成第二个容器的占位元素，逻辑很简单：获取第一个容器的子元素数量，然后循环创建对应数量的占位元素，把目标元素插入到对应位置即可。

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