当前位置：首页 > article >正文

Vue中集中常见的布局方式

article 2024/9/28 13:35:38

布局叠加
完整代码
最外层的Container设置为relative，内部的几个box设置为absolute

<template>
  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
  </div>
</template>

<script>
export default {
  // 组件逻辑
};
</script>

<style scoped>
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #888888;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.box1 {
  background-color: red;
  top: 50px;
  left: 50px;
}

.box2 {
  background-color: blue;
  top: 100px;
  left: 100px;
}

.box3 {
  background-color: green;
  top: 150px;
  left: 150px;
}
</style>

如果Container不设置relative则，内部的box则会相对整个页面进行布局
使用绝对布局，一个居中，一个居右。
其中box1，左上距离父布局50%，然后自身偏移50%，使其居中

.box1 {
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

完整代码

<template>

  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box3">Box 3</div>
  </div>

</template>

<script>
export default {
  // 组件逻辑
};
</script>

<style scoped>
.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #888888;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.box1 {
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.box3 {
  background-color: green;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
</style>

水平方向线性布局
设置父布局 display: flex; flex-direction: row;子布局取消position: absolute;即可

.container {
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 300px;
  background: #888888;
}

.box {
  //position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}