【css】按钮等分问题等分问题假设现在有三个按钮，均匀分布于一个div中，并且左右两个按钮都贴在div的边缘。现在有一

等分问题

假设现在有三个按钮，均匀分布于一个div中，并且左右两个按钮都贴在div的边缘。现在有一个需要：当鼠标移动到按钮上的时候，按钮放大，并且放大后的按钮依然贴边，同时，其余的按钮位置不应该改变。请问该如何实现？如果是五个按钮呢？

目标效果大致如图：

我的实现

实现思路

使用绝对布局，来对按钮进行等分点位（0%, 50%, 100% 三个点位）。
公式:left: calc(100% / (按钮个数 - 1) * (第几个按钮 - 1))
transform: translateX(-50%)来将按钮居中
- 特殊处理首尾两个按钮transform: translateX(0)
添加hover变大效果，使用scale的方式
- 处理首尾两个按钮(通过简单的几何学)
  - 首transform: scale(150%) translateX(calc((150% - 100%) / 2 / 1.5));
  - 尾transform: scale(150%) translateX(calc((150% - 100%) / 2 / 1.5 * -1));

实现代码

<div>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

    div {
      background-color: aquamarine;
      position: relative;
      width: 100%;
      height: 23px;
    }

    button {
      position: absolute;
      transform: translateX(-50%); /* for center */
    }

    /*公式 left: calc(100% / (按钮个数 - 1) * (第几个按钮 - 1))*/
    button:nth-child(1) {
      left: calc(100% / (3 - 1) * (1 - 1));
    }
    button:nth-child(2) {
      left: calc(100% / (3 - 1) * (2 - 1));
    }
    button:nth-child(3) {
      left: calc(100% / (3 - 1) * (3 - 1));
    }

    button:first-child {
      left: 0;
      transform: translateX(0);
    }
    button:last-child {
      /* 必须用right 不用left，否则文字会挤下去。亲测。 */
      transform: translateX(0);
      right: 0;
      left: auto;
    }

    /*hover变大*/
    button:hover {
      transform: translateX(-50%) scale(150%);
    }
    button:first-child:hover {
      transform: scale(1.5) translateX(calc((150% - 100%) / 2 / 1.5));
    }
    button:last-child:hover {
      transform: scale(1.5) translateX(calc((150% - 100%) / 2 / 1.5 * -1));
    }

讨论

为什么不用`flex`的`justify-content: space-between`实现？

这样做的话，如果第一个按钮太长了，那么中间的按钮就不会再待在中间了，而是会往右边移动。这是均分剩余空间的缘故。

还有别的方法吗？

跟设计表示实现不易，换方案。我是换成element-ui的tabs组件了。

【css】按钮等分问题