Vue项目实现自适应的左右布局和上下布局方式
作者：起飞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">的方式实现上下布局
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。