左右布局：
我们布局一般使用的是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 :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-col :span=""24>把列的空间分成24等份，在继续通过使用两个的方式实现上下布局
