element-ui中el-container容器与div布局区分

用于布局的容器组件，方便快速搭建页面的基本结构：

el-container：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：主要区域容器。

el-footer：底栏容器。

以上组件采用了 flex 布局，elemen-ui官方文档链接：
http://element-cn.eleme.io/#/zh-CN/component/container

此外，el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container。【这句话请注意】
-------------------------------------------------------------------------------------------------------
一般这种装箱容器在使用element-ui编写页面的时候非常常见，比 div 更好用一点，但是这次我在使用的时候，他非常的“不听话”

一、我的需求

这是一个弹出框，基本的页面布局是：

上面的一行为弹出框的title显示
中间部分是主要展示内容
最下面是基本操作按钮

二、提出问题

我最开始的布局代码是：

部分不能说明问题的代码没有写出来

出现的页面是：
这个红色的部分，我放在了el-row里面，应该会出现在最后一行位置，但是他出现在第一行的并存位置，仔细查看代码，一切正常。
浏览器也已经识别

CSS样式没有冲突的地方。

三、解决方案

修改代码el-container布局为div

页面布局就是想要的结果：

四、分析原因

1、el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container

我错误出现的原因在于，我在el-container 布局容器里面放入了el-row,虽然浏览器已经识别那是一个行组件，但是没有把他真正的作用体现出来。

2、div中一般是el-row和rl-col
div中的el-row和rl-col就和普通HTML中的表格行与列相似。

2、el-container一般用于整个页面的大布局，div常用于部分区域的小布局
div一般是；
el-container一般是：

希望大家以后别犯我这样子的错误哈

五、本页面的源码

本页面的数据是mock模拟生成的，后期的税局库数据是通过url在service中获取的

END

good lunck to you