Flex行布局下导航栏SVG图标点击变大时如何保持兄弟元素位置不变

问题根源 #

1. 非激活态图标额外设置了margin-top: 20px，激活态图标无此样式，切换时单个图标容器的总高度会发生变化
2. 图标父容器._icons使用align-items: center对齐规则，单个子元素高度变化会触发所有兄弟元素的垂直位置重排

修复步骤 #

第一步：修改容器样式，固定高度避免布局抖动 #

修改sass代码中._icons子项的样式，用固定高度+transform偏移替代margin，避免容器高度变化：

._icons
  display: flex
  justify-content: space-around
  align-items: flex-end /* 改为底部对齐，更适配导航栏场景，避免居中对齐带来的抖动 */
._icons>*
  flex: 1
  height: 60px /* 取值大于等于你激活态图标的最大高度即可 */
  display: flex
  justify-content: center
  align-items: center
  ._svg
    cursor: pointer
  ._jobs,
  ._trends,
  ._cast,
  ._messages,
  ._profile
    transform: translateY(10px) /* 替代原来的margin-top，transform不会改变容器占位尺寸 */
/* 删除原样式中._jobs等类的margin-top:20px规则 */

第二步：可选优化过渡效果 #

把现在的v-if/v-else切换改为v-show控制显隐，无需销毁重建dom，过渡更流畅，也彻底避免切换瞬间的布局跳变：

<!-- 单个图标修改示例，其余图标同理修改即可 -->
<div @click="jobsClicked">
  <transition name="fade" mode="out-in">
    <img src="/jobs-active.svg" class="_svg" v-show="jobsShow" key="active" />
    <img src="/jobs.svg" class="_svg _jobs" v-show="!jobsShow" key="default" />
  </transition>
</div>

以上修改完成后，所有图标容器的占位尺寸固定，切换激活态时不会改变周围元素的位置。

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