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">的方式实现上下布局

感觉有帮助的小伙伴们，请点赞点赞点赞，收藏收藏收藏