目录
问题描述
在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">的方式实现上下布局
感觉有帮助的小伙伴们,请点赞点赞点赞,收藏收藏收藏