使用Flexbox实现固定定位垂直按钮的均匀间距问题

问题场景 #

想通过Flexbox实现右侧固定定位的垂直排列按钮，已完成部分设置，但按钮间无法保持均匀间距，相关代码如下：

Less代码 #

.block-fixed-right{
  position: fixed;
  right:0;
  .vertical-btn{
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 3rem;
    .btn {
      //margin: 2em auto;
      transform: translateY(-50%) rotate(180deg);
      writing-mode: vertical-lr;
    }
  }
}

HTML代码 #

<div class="block-fixed-right">
    <div class="vertical-btn">
        <a class="btn btn-main" href="/{$lang}/devis/">报价</a>
        <a class="btn btn-main" href="/{$lang}/devis/">我的超级按钮</a>
        <a class="btn btn-main" href="/{$lang}/devis/">联系我</a>
    </div>
</div>

问题核心 #

当前固定定位的容器未占据完整垂直空间，Flex子容器没有足够高度支撑均匀间距布局，导致按钮仅在局部空间内排列，间距无法均匀分布。

解决方案 #

通过调整固定容器的高度约束和Flex容器的布局属性，实现按钮均匀分布：

修改后的Less代码 #

.block-fixed-right{
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0; // 让固定容器占满垂直方向全部空间
  .vertical-btn{
    display: flex;
    flex-direction: column;
    height: 100%; // 继承父容器高度，获得完整垂直空间
    justify-content: space-evenly; // 按钮均匀分布，间距自动适配
    margin-top: 0; // 去掉多余margin，避免顶部留白影响分布
    .btn {
      transform: rotate(180deg); // 移除 translateY(-50%)，避免位置偏移
      writing-mode: vertical-lr;
    }
  }
}

关键修改点 #

• 给.block-fixed-right添加top: 0; bottom: 0;，让固定定位容器铺满右侧垂直区域
• 为.vertical-btn设置height: 100%;，确保Flex容器拥有足够高度来分布子元素
• 使用justify-content: space-evenly;替代固定gap，让按钮在垂直方向自动均匀分配间距（若需要两端对齐可改用space-between，若需要两端留白可改用space-around）
• 移除按钮的translateY(-50%)，避免不必要的位置偏移，保证排列整齐

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