Vue中集中常见的布局方式

  • 布局叠加
  • 完整代码
  • 最外层的Container设置为relative,内部的几个box设置为absolute
js 复制代码
<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%,使其居中
js 复制代码
.box1 {
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
  • 完整代码
js 复制代码
<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;即可
js 复制代码
.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;
}
相关推荐
小远yyds9 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果28 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长32 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js