【Vue+Element UI】将按钮固定在页面的某一位置，且浏览器窗口大小发生变化时仍能显示

模板：vue-admin-template v4.4.0

问题描述：未对按钮的样式进行规定之前，会默认将按钮放在在页面的左上角。实际中需要让按钮独占一整行，并恒处于页面的右侧（当浏览器窗口尺寸变化后也能保持相对位置）。

效果展示：

• 全尺寸浏览器

  

• 尺寸变化后的浏览器

  

实现代码：

<div class="d2">
      <el-button 
                 class="btn1" 
                 type="primary" size="small" icon="el-icon-refresh-right" 
                 @click="getLiveList()">手动刷新</el-button>
    </div>

<style>
.d2 {
   min-width: 100%;
    height: 40px;
    position: relative;
    display:flex;
    justify-content:flex-end;

}
.btn1 {
  position: relative;
  right: 10px;
  top: 10px;
}
    </style>

注解：

• div作为容器，可以独占一行，但在实际测试中需要设置其宽度。原本设定的宽度为width: 1200px为固定值，不具有迁移性。设置min-width为100%可以定义块级对象的百分比最小宽度。[CSS: min-width属性](CSS min-width 属性 (w3school.com.cn))

• justify-content: flex-end：在容器中中对弹性项目的位置进行设置，可以设置center、flex-start、flex-end等值，分别规定项目位于容器的位置。

• position: relative：可以设置absolute、relative等值，设置元素为绝对定位或相对定位。

• 在btn1中设置right、top，设置项目据顶部和右边的距离。