使用container的嵌套_ElementUI 技术揭秘（4）— Container 布局容器组件的设计与实现。...

前言

上一篇文章我们分析了 Layout 布局组件的设计和实现，它的应用场景通常是局部布局。对于整个页面的布局，element-ui 提供了 Container 布局容器组件，专门用于 PC 管理后台页面的整体布局。

需求分析

我们先通过几幅图看一下页面的常见布局。

这两张图的布局在后台系统中很常见，通过简单的 CSS 就可以实现。不过我们更喜欢用组件化的开发方式，把这些 CSS 的细节封装到组件里，如下：

<el-container>
  <el-header>Headerel-header>
  <el-main>Mainel-main>
  <el-footer>Footerel-footer>
el-container>

<el-container>
  <el-header>Headerel-header>
  <el-container>
    <el-aside width="200px">Asideel-aside>
    <el-container>
      <el-main>Mainel-main>
      <el-footer>Footerel-footer>
    el-container>
  el-container>
el-container>

我们使用了 、、、、 5 种组件，来看一下它们各自的作用：

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

• ：顶栏容器。

• ：侧边栏容器。

• ：主要区域容器。

• ：底栏容器。

这几个组件需要遵循如下约束：

的子元素只能是后四者，后四者的父元素也只能是 。

了解了 element-ui Container 布局容器组件的需求后，我们来分析它的设计和实现。

设计和实现

针对图示的布局，我们可以通过 flex 的布局方式轻松实现，element-ui 也是基于 flex 布局实现的，