Vue中集中常见的布局方式

• 布局叠加
  
• 完整代码
• 最外层的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;
}