CSS实现：display:flex容器内兄弟元素隐藏时如何让指定元素右移

云上老周

2026-10-3

实现方案

你可以通过flex布局的剩余空间分配规则实现需求，以下是两种适配不同场景的实现方式：

基础HTML结构

<div class="link-container">
  <a href="#" class="link link-a">link-a</a>
  <a href="#" class="link link-b">link-b</a>
  <a href="#" class="link link-c">link-c</a>
</div>

方案1：三元素均匀分布场景

适合三个链接宽度相近，需要link-b处于三个元素的间隔中点的场景：

.link-container {
  display: flex;
  /* 剩余空间均匀分配在元素之间 */
  justify-content: space-between;
  width: 100%; /* 可根据业务调整容器宽度，比如固定600px */
}

/* 特定场景触发的隐藏类 */
.link-c.hidden {
  display: none;
}

效果：

link-c显示时：link-a靠左、link-b居中、link-c靠右
link-c隐藏时：仅剩余两个元素，剩余空间全部分配在link-a和link-b之间，link-b自动偏移到右侧

方案2：link-b严格居中场景

适合需要link-b始终处于容器正中间，不受link-a、link-c宽度影响的场景：

.link-container {
  display: flex;
  align-items: center;
  width: 100%;
}
.link-a {
  /* 左侧元素占满右侧剩余空间，固定在左边缘 */
  margin-right: auto;
}
.link-c {
  /* 右侧元素占满左侧剩余空间，固定在右边缘 */
  margin-left: auto;
}
.link-b {
  /* 可选：避免link-b被挤压变形 */
  flex-shrink: 0;
}
.link-c.hidden {
  display: none;
}

效果：