vue 的按钮可以随页面大小而自适应嘛，如果可以给我一份实例代码

当然可以，以下是一个简单的示例代码：

<template>
  <div class="button-container">
    <button class="flexible-button">按钮1</button>
    <button class="flexible-button">按钮2</button>
    <button class="flexible-button">按钮3</button>
  </div>
</template>

<style>
.button-container {
  display: flex;
  justify-content: space-between;
  /* 如果需要设置按钮与父容器之间的距离，可以使用下面两行代码 */
  /* padding-left: 10px; */
  /* padding-right: 10px; */
}

.flexible-button {
  flex: 1;
  /* 如果需要设置按钮的样式，可以在这里添加其他的 CSS 属性 */
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

在这个示例中，我们首先在按钮所在的父容器上设置 `display: flex;` 和 `justify-content: space-between;`，这样按钮就会在父容器内按照等距离排列。然后在按钮元素上设置 `flex: 1;`，这样按钮就会根据父容器的大小自适应宽度。如果需要设置按钮与父容器之间的距离，可以使用 `padding-left` 和 `padding-right` 属性。最后，我们在按钮的 CSS 样式中添加了一些基本的样式属性，来使按钮看起来更加美观。