Vue项目实现自适应的左右布局和上下布局方式

更新时间：2026年07月01日 10:50:12 作者：起飞001

在Vue项目中实现左右和上下布局,通过flex布局和Ant Design Vue库轻松解决,详细代码解析助你快速掌握布局技巧

问题描述

在Vue项目中，我们这些初学者可能会因为布局的问题而感到苦恼，下面我就来整理一下一种左右布局和上下布局的简单方式

解决方案

左右布局

我们布局一般使用的是div元素，不过div元素是块元素（会自动占满一整行），导致左右布局不好

实现，下面向大家展示一种flex布局来轻松解决这个问题，代码如下

.xpanel-wrapper-2 {
	height:100%;
	display: flex;
   .xpanel{
	padding:15px;
	height:100%;
	min-height:170px;
	background:url("../img/panel.png") center no-repeat;
	background-size:100% 100%;
	box-sizing:border-box;
	.xpanel_1 {	
            display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding:15px;
			height:40%;
			min-height:170px;
			background-size:100% 100%;
			box-sizing:border-box;
	   }
   }
   .xpanel2 {
	flex-grow: 1;
	display: flex;
	padding:15px;
	height:100%;
	min-height:170px;
	background:url("../img/panel.png") center no-repeat;
	background-size:100% 100%;
	box-sizing:border-box;
   }
}

能看懂代码的小伙伴直接使用代码，稍微有些疑惑的小伙伴就来听我解释一下吧，我首先需要设置一个父盒子来包裹两个子盒子，在父盒子中设置flex布局，使用flex布局就能实现左右布局

display: flex;

然后在子盒子中设置

flex-grow: 1;

重点来说一下flow-grow:1的效果就是在未设置该属性的盒子里，盒子展示设置大小，然后设置该属性的盒子就能自动填充掉整个屏幕中余下的部分，从而实现自适应布局

上下布局

这里面主要是通过行标签<a-row>和列标签<a-col>标签实现的

<a-row>
  <a-col :span="24">
  <a-col :span="12">
<div classs="xpanel_1">
   <newBar></newBar>
 </div>
 </a-col >
  <a-col :span="12">
<div class="xpanel_1">
  <radition></radition>
 </div>
   </a-col>
   </a-col>
</a-row>

能看懂的小伙伴直接拿走代码，稍有疑惑的伙伴请听我解释一下，我们这里是通过行标签<a-row>将需要上下布局的盒子包裹起来，然后通过列标签<a-col :span=""24>把列的空间分成24等份，在继续通过使用两个<a-col :span="12">的方式实现上下布局

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

解决Echarts2竖直datazoom滑动后显示数据不全的问题
这篇文章主要介绍了解决Echarts2竖直datazoom滑动后显示数据不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue源码之rollup环境搭建步骤详解
这篇文章主要介绍了Vue源码之rollup环境搭建步骤详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue实现实时监听页面宽度高度变化
这篇文章主要为大家详细介绍了Vue如何实现实时监听页面宽度高度变化,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-03-03
你准备好迎接vue3.0了吗
这篇文章主要介绍了你准备好迎接vue3.0了吗,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
解决vue页面DOM操作不生效的问题
下面小编就为大家分享一篇解决vue页面DOM操作不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue 巧用过渡效果(小结)
这篇文章主要介绍了vue 巧用过渡效果(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue跳转页面并且实现参数传递接受示例
这篇文章主要为大家介绍了vue跳转页面并且实现参数传递接受示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
vue加载天气组件使用方法详解
这篇文章主要为大家详细介绍了vue加载天气组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue3中的createGlobalState用法及示例详解
createGlobalState 是 Vue 3 中一种管理全局状态的简便方式,通常用于管理多个组件间共享的状态,由 @vueuse/core 提供的,允许创建一个响应式的全局状态,本文给大家介绍了Vue3中的createGlobalState用法及示例,需要的朋友可以参考下
2024-10-10
vue实现列表无缝动态滚动
要想实现列表的动态无缝滚动,本文为大家推荐两款组件,vue-seamless-scroll和vue3-seamless-scroll,组件的用法也非常简单,下面就跟随小编一起来学习一下吧
2024-11-11