布局定位

• flex 基本示例
• flex 水平垂直
• flex 水平居中
• flex 垂直居中
• RA定位 水平垂直居中
• RA定位 角落定位

Flex 定位

该部分主要讲解布局定位 flex 样式

基本示例

测试

<template>
  <div class="box" style="height: 80px;border: 1px red solid;">
    <div style="height: 40px;border: 3px blue solid;width: 40px">测试</div>
  </div>
  <div style="height: 20px"></div>
  <div class="box" style="height: 80px;border: 1px red solid;">
    <el-button type="primary">测试</el-button>
  </div>
</template>
<style>
</style>

Expand Copy Copy

水平垂直

水平垂直居中

测试

水平垂直靠左

测试

水平垂直靠右

测试

<template>
  <el-card class="card">
    <div slot="header" class="clearfix">
      <span>水平垂直居中</span>
    </div>
    <div class="box1" style="height: 80px;border: 1px red solid;">
      <div style="height: 40px;border: 3px blue solid;width: 40px">测试</div>
    </div>
    <div style="height: 20px"></div>
    <div class="box1" style="height: 80px;border: 1px red solid;">
      <el-button type="primary">测试</el-button>
    </div>
  </el-card>

  <el-card class="card">
    <div slot="header" class="clearfix">
      <span>水平垂直靠左</span>
    </div>
    <div class="box11" style="height: 80px;border: 1px red solid;">
      <div style="height: 40px;border: 3px blue solid;width: 40px">测试</div>
    </div>
    <div style="height: 20px"></div>
    <div class="box11" style="height: 80px;border: 1px red solid;">
      <el-button type="primary">测试</el-button>
    </div>
  </el-card>

  <el-card class="card">
    <div slot="header" class="clearfix">
      <span>水平垂直靠右</span>
    </div>
    <div class="box12" style="height: 80px;border: 1px red solid;">
      <div style="height: 40px;border: 3px blue solid;width: 40px">测试</div>
    </div>
    <div style="height: 20px"></div>
    <div class="box12" style="height: 80px;border: 1px red solid;">
      <el-button type="primary">测试</el-button>
    </div>
  </el-card>
</template>
<style>
  .el-card.card {
    margin: 20px;
  }

  .box1 {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直居中 */
    width: 100%;
    height: 100vh; /* 可选：使容器高度为视口高度以便更好观察居中效果 */
  }

  .box11 {
    display: flex;
    justify-content: flex-start;
    align-items: center; /* 垂直居中 */
    width: 100%;
    height: 100vh; /* 可选：使容器高度为视口高度以便更好观察居中效果 */
  }

  .box12 {
    display: flex;
    justify-content: flex-end;
    align-items: center; /* 垂直居中 */
    width: 100%;
    height: 100vh; /* 可选：使容器高度为视口高度以便更好观察居中效果 */
  }
</style>

Expand Copy Copy

水平居中

测试

<template>
  <div class="box2" style="height: 80px;border: 1px red solid;">
    <div style="height: 40px;border: 3px blue solid;width: 40px">测试</div>
  </div>
  <div style="height: 20px"></div>
  <div class="box2" style="height: 80px;border: 1px red solid;">
    <el-button type="primary">测试</el-button>
  </div>
</template>
<style>
  .box2 {
    display: flex;
    justify-content: center;
  }
</style>

Expand Copy Copy

:::

垂直居中

测试

<template>
  <div class="box3" style="height: 80px;border: 1px red solid;">
    <div style="height: 40px;border: 3px blue solid;width: 40px">测试</div>
  </div>
  <div style="height: 20px"></div>
  <div class="box3" style="height: 80px;border: 1px red solid;">
    <el-button type="primary">测试</el-button>
  </div>
</template>
<style>
  .box3 {
    display: flex;
    align-items: center; /* 垂直居中 */
  }
</style>

Expand Copy Copy

RA定位

该部分主要讲解布局定位 Relative 和 Absolute 样式

水平垂直居中

测试

<template>
  <div class="parent" style="height: 80px;border: 1px red solid;">
    <div style="height: 40px;border: 3px blue solid;width: 40px" class="child">测试</div>
  </div>
  <div style="height: 20px"></div>
  <div class="parent" style="height: 80px;border: 1px red solid;">
    <el-button type="primary" class="child">测试</el-button>
  </div>
</template>
<style>
  .parent {
    position: relative; /* 设置父元素为相对定位 */
    height: 300px;
    border: 1px solid black;
  }

  .child {
    position: absolute; /* 设置子元素为绝对定位 */
    top: 50%; /* 相对于父元素顶部的50% */
    left: 50%; /* 相对于父元素左侧的50% */
    transform: translate(-50%, -50%); /* 将子元素的中心对齐到父元素的中心 */
  }
</style>

Expand Copy Copy

角落定位

测试

<template>
  <div class="parent1" style="height: 80px;border: 1px red solid;">
    <div style="height: 40px;border: 3px blue solid;width: 40px" class="child1">测试</div>
  </div>
  <div style="height: 20px"></div>
  <div class="parent1" style="height: 80px;border: 1px red solid;">
    <el-button type="primary" class="child1">测试</el-button>
  </div>
</template>
<style>
  .parent1 {
    position: relative; /* 设置父元素为相对定位 */
    height: 300px;
    border: 1px solid black;
  }

  .child1 {
    position: absolute;
    top: 10px; /* 调整这个值来控制按钮的垂直位置 */
    right: 10px; /* 调整这个值来控制按钮的水平位置 */
    z-index: 100; /* 确保按钮在其他元素之上 */
  }
</style>

Expand Copy Copy