使用 Elementor 的最新 Container （容器）元素相比于早期版本中的 Section 元素有几个显著的优势。Container （容器）元素是 Elementor 团队为了提升灵活性、性能和设计能力而引入的，这些改进意味着更加强大和灵活的布局选项，对设计者和开发者来说是一个重要的进步。但是对于很多小白来说上手还是有些困难。如果学过些CSS的可能就会清楚，其实就是flex布局。
一、Container （容器）的好处
- 更灵活的布局控制:
- 容器元素提供了更多的布局选项，如 Flexbox 和 Grid，允许更复杂和精细的布局控制。
- 它可以在一个容器内部管理多个子元素，而不仅仅是列。
- 改进的响应式设计:
- 容器元素允许对不同的屏幕大小进行更精细的调整，提供了更好的响应式设计控制。
- 它支持更复杂的响应式布局，例如在不同设备上显示或隐藏特定元素。
- 减少DOM元素数量:
- 与 Section 相比，容器元素可以减少生成的 DOM (文档对象模型) 元素的数量，这有助于提高页面加载速度和性能。
- 更少的 DOM 元素也意味着更简洁的代码和更好的SEO优化。
- 更好的边距和填充控制:
- 容器提供了更灵活的边距和填充设置，允许对子元素进行更精细的空间控制。
- 这有助于创建更精确的设计，特别是对于复杂的布局结构。
- 更多的设计选项:
- 容器元素提供了更广泛的设计选项，如背景、边框、形状分割器等，使设计更具创造性和多样性。
二、如何启用Elementor的Container功能
从设置上，Elementor 和 Elementor Pro 最新版默认 Grid Container 和 Flexbox Container 是开启的，如果是旧版本的可以自行开启下。
在WordPress后台的Elementor设置中启用Elementor Container功能
找到Flexbox弹性盒容器后选择启用
启用后滑动到最下方点击保存
同样操作找到Grid容器后选择启用并保存
保存完后再次回到Elementor编辑页面的部分，可以看到原先的内部区段已经消失，多出来了两个组件。
和列中行不同，每次新增行，都会先选择框架，有 Flexbox Container 和 Grid Container 两种选择，后面会详细说明。
三、Elementor Containner的基本设置
3.1 Containner的布局设置
1）Containner通用设置
鼠标选中Containner，在左侧的窗口中切换到Layout标签，可以对Containner进行布局设置。
Containner Layout用于切换Containner的布局方式，有Flexbox和Grid两个选项，默认的选项是Flexbox。
Content Width用于设置Containner的宽度，可以用Boxed或者Full Width。默认设置是Boxed代表内容的宽度基于一个固定宽度，这个宽度你可以在下面的width里面设置，默认值是1140px，你可以在Elementor Site setting中设置一个全局的内容宽度。
Boxed默认宽度是你在Site Setting全局中设置好的内容宽度（Elementor默认的全局内容宽度是1140px）。你可以通过滑动条修改宽度。
Full Width设置代表全款，它的默认宽度会基于包裹的Containner铺满，如果是画布中顶级的最外部的Containner，则宽度默认基于浏览器窗口铺满。你可以通过滑动条调整宽度。
MIn Height用来设置Containner的最小高度，当Containner中没有内容或者内容较少时，则以最小高度显示，如果Containner中的内容较多，则默认以匹配内容的高度显示。你可以通过滑动条或者输入数值的方式修改高度。
Containner Layout可以将Flexbox切换为Grid，Flexbox和Grid的Item设置有所区别。
Flexbox和Grid的Item设置项目有所不同，这里我分2个标题介绍：
2）Flexbox的Item设置
当你将Containner Layout设为Flexbox的时候，你可以看到Item设置如下：
Direction代表显示方向，有4个选项，按照箭头指示风别为：从左到右，从上到下，从右到左，从下到上。
使用Direction可以改变你在Containner中排放元素的方向和顺序，举一个列子：
我在一个Containner中放了2个元素标题和文本，默认情况下如果Containner的Item Direction设置为从左到右，那么显示则按照1，切换不同的Direction之后就会有不同的显示方法和顺序，可以自行测试
Justify Content的设置是在和Direction方向垂直的方向上，设置Containner内部的元素对其效果。
如果Direction设置为水平的从左到右边或者从右到左边，则Justify Content的设置就是基于垂直方向的对其方式。
如果Direction设置为从上到下或者从下到上，则Justify Content的设置就是基于水平方向的对其方式。
简单来说就是Justify Content是基于Direction方向垂直方向上的Containner内部元素的对齐设置。
Justify Content有五个设置选项：
- Start（开始）：从Containner布局方向最开始的地方开始排列Containner内部的元素
- Center（中间）：基于Containner布局方向的垂直方向居中排列Containner内部的元素
- End（结束）：从Containner布局方向末尾结束的地方开始排列Containner内部的元素
- Space Between（间距）：首个元素放置于起点，末尾元素放置于终点均匀排列每个Containner内部的元素
- Space Around（周围空间）：为每个元素分配相同的空间，然后排列在Containner中
- Space Evenly（空间均匀）：每个元素之间的距离相同，然后排列在Containner中
具体每一个选项设置的效果如何，建议自己在网站中进行设置并观察，我这里就不做举例。
Align Items就是和Direction方向一致的Containner内部元素对其的设置。
Align Items包含四个选项：
- Start（开始）：基于Direction布局方向最开始的地方排列Containner内部的元素
- Center（中间）：基于Direction布局方向居中排列Containner内部的元素
- End（结束）：基于Direction布局方向结束的地方排列Containner内部的元素
- Stretch（拉伸）：基于以上三种任意一种对其方式拉伸布局Containner内部的元素（‘auto’-sized 的元素会被拉伸以适应容器的大小 ，如果设置了固定的大小则不会自动拉伸。）
对比上图和下图，观察标题和文本的背景颜色可以看到Stretch拉伸的布局效果。
Gap between elements设置Containner内部元素之间的间距。
默认是20px，你可以根据自己的需求修改。
Wrap用于设置Containner内部的元素是否换行。
默认是No Wrap不换行的，如果你Containner是从左到右排列方向的话，你想Containner中添加6个元素，这些元素都排列在一行中。
如果你希望Flexbox Containner中的元素换行，则设为Wrap即可。
3）Grid的Item设置
当你将Containner Layout设为grid的时候，你可以看到Item设置如下：
在Item设置的第一个项目是Grid Outline，也就是轮廓。
Grid Outline是用来控制显示或者隐藏网格线的，注意这个线也是一个虚线，只在画布中显示，用于展示Grid的网格布局排列，实际上是不存在的。
如果你关闭Grid Outline，则不显示网格线，但是Grid Containner的布局还是按照你设置的进行布局，所以你可以理解为它是一个辅助线。
然后是Columns和Rows，行和列数设置。
设置Grid为3列2行。
Gaps用于设置Items之前的间距，你可以取消同步，单独设置行的间距和列的间距。
默认情况下，Grid Containner中的Items之间会有一个默认的间距，大概10px，如果你想Items之间的间距为0像素，则需要手动设置Gaps为0.
Auto Flow用于控制Grid Items自动流动的方向，默认情况下是Row自动流动，也就是说行数根据Items的数量会自动增加。
比如你设置Grid的Items布局为3列2行，并默认Row自动流动的话，默认是6个元素排列，但是如果你添加的元素超过6个，那么Grid就是自动添加一个行就继续排列。
如果设置Auto Flow为Column的时候，那么列就是会根据Items数量自动增加。
Justify Items和Align Items用于设置Grid Containner内部的Items的对其方式的，每个Items的对其的参照为Grid Outline的虚线。
4）Additional Options其他选项设置
在Containner的Additional Options中有2个选项。
Overflow溢出设置
控制Containner的内容是否不适合浏览器器窗口，溢出的内容是否应该隐藏或可见，从而导致水平滚动。
Overflow有三个选项：
- Default 允许容器外的项目溢出。
- Hidden 隐藏溢出的项目，无法访问溢出的项目。
- Auto 在内容溢出时创建滚动条以保持项目可访问，此设置允许在移动视图中滑动内容。
Hidden状态下，如果内容溢出了，是看不到溢出的内容的
Default和Auto状态下可以通过左右滑动看到溢出的内容
3.2 Containner的风格设置
切换到Containner的Style选项卡可以设置Containner的风格。
1）Background(背景)
你可以通过背景为Containner设置背景颜色。比如下图，我设置Containner的背景颜色为红色。
- 当然你还可以为Containner的设置背景图。
- 设置Containner背景为渐变。
- 为Containner设置一个视频背景。
- 为Containner设置一个轮播相册背景，
这些不同的背景设置模式下还有一些细节的设置项目我就不展开说了，建议自己设置之后看效果。
另外你还可以切换到Hover属性标签下面设置Containner背景在鼠标移动上去的效果。比如设置Hover的背景颜色为黑色，或者设置一张Hover背景图片（鼠标移动到Containner之后将会切换到Hover设置的背景图片）。
2）Background Overlay（背景覆盖）
背景覆盖可以实现给你设置的背景叠加一层颜色或者图片蒙板，你可以设置颜色或者图片的透明度来匹配你想要实现的效果。
比如我给Containner添加了黑色覆盖，透明度为20%
在Hover标签中设置覆盖颜色为黑色，透明度为60%，那么用户将鼠标移动到Containner时，背景会变暗，这样Containner中浅色的文字内容将会更加凸显。
3）Border（边框设置）
Border用于设置Containner的边框和投影效果。
一般情况下我不会设置最外面嵌套的Containner的边框和投影。
在是当Containner嵌套在内部的时候，通过边框和投影的设置可以凸显出Containner的内容，如果是并列排列的局部，可以让布局看上去更加整齐。
比如下图，我给内部的三个Containner都设置了投影和圆角，让他们看起整齐，并且凸显内部的内容。
4）Shape Divider（形状分割线）
形状分割线可以用来做一些Containner之间的分割效果，这是UAE插件提供的功能，本站读者可以免费领取一个终身授权，通过页脚二维码联系即可。
你可以通过切换Top和Bottom来选择设置Containner顶部还是底部的分割形状，在Type中你可以选择一个你喜欢的形状（只能选择提供的）
比如我在下图的Containner顶部设置了一个山峦的形状分割，当然它还有针对形状的宽度，高度等设置，这里就不细说了，自己亲自尝试这些设置选项。
3.3 Containner的高级设置
在高级设置中你可以设置当前元素的布局，运动效果，转换响应式，属性以及自定义CSS等等内容。在Elementor中所有元素都有高级设置，元素不同设置项目会有所不同。
下面的内容可以作为你学习其他元素的高级设置项目的参考。
1）Layout（布局）
这里是布局是针对Containner元素本身的布局，和前面的布局有所不同，前面的提到的布局是针对Containner内部的元素的布局设置。
Margin：用于设置元素和外部元素之间的距离。
Padding：用于设置元素和内部元素的间距。
Align Self：用于设置元素基于自身的对齐。
Order：用于设置元素自身在同级元素中的排列顺序，可以通过自定义设置元素排列在第几的位置，排列顺序从0开始。
下图中我将内部的2个Containner一个设为0一个设为2，他们就会排列在相应的位置，而1的位置会空着。
Size：设置元素本身的伸展（Grow）和收缩（Shrink）效果，伸展设置即元素撑满布局，收缩设置即元素收缩到内容的宽度或高度。
Position：设置元素的位置有三个选项：
- Default 默认（根据容器布局和元素设置自然排列）
- Absolute 绝对（将元素设置在浏览器中的一个固定位置，不会跟随页面滑动而滑动会固定在浏览器窗口中的某个位置）
- Fixed固定的（将元素设置在页面中的一个固定位置，元素可以跟随页面滑动而滑动）
以上三条在我在制作页面时经常会用到，理解和掌握之后对制作丰富的页面内容布局非常有帮助。
Z-index：用于设置元素的在页面中处于显示层级，数值越大，越在最上层，数值越小越在最底层，底层的元素可以被上层的元素覆盖。
CSS Classes：用于设置元素的自定义CSS类，设置自定义类之后你可以通过程序代码控制这个元素。
2）Motion Effects（运动效果）
Scrolling Effects（滚动效果）：设置元素滚动特效。它包括垂直滚动、水平滚动、透明度、模糊、旋转、规模等内容，还可以设置在哪些终端生效，以及这些效果是基于整个页面还是基于当前窗口的。具体的参数设置你可以自己设置之后看效果，然后理解。
Mouse Effects（鼠标效果）：用于设置鼠标移动到元素的动态效果，它包含鼠标轨迹和3D倾斜2种效果。
Sticky（粘性固定）：用于设置元素粘性固定，可以黏在顶部，也可以设置黏在底部。同时可以设置它在哪些终端有效。
其中offset用于设置元素按照多少像素向下或向上移动（如果你设置为向下滚动时固定，并不希望它遮挡你的固定页眉时，可以设置其像素为一个大于页眉高度的像素）；Effect Offset用设置在粘性效果开始之前用户必须滚动的像素数（通常设为0或者1即代表一旦向下或向上滚动即发生粘性效果）。
下图中我设置该元素黏在顶部，Offset设为120像素，这样它黏在页眉的下方，不会覆盖住页眉。
如果你希望元素在一个固定的内容区间粘性，那么开启Stay in Colum，代表这个元素只会在它的父级Containner内部有粘性效果，一旦页面滑动离开该Containner，则粘性效果不在生效。
Sticky功能还可以帮助你实现固定页眉和粘性侧边栏的效果。
Entrance Animation（进入动画）：用于设置改元素进入视觉范围的动画效果。默认是不设置的，如果你需要设置点击开下拉选择你要的进入动画效果即可。
4）Transform（转换）
注意：避免在粘性Containner上应用转换属性。这样做可能会导致意想不到的结果。
转换属性可以设置Containner的旋转、倾斜、翻转等效果，通过对应选项的设置你可以在编辑窗口直观的看到Containner的变化。
你可以通过Normal和Hover来设置默认或者鼠标滑过的转换效果，只需要切换对应标签进行设置即可。
5）Responsive（响应式能见度）
Responsive 设置在不同终端的可见性，默认情况下Containner元素在任何终端都是可见的，你可以通过开启隐藏在某一个终端来实现当前Containner元素在对应终端对用户不可见。
我最常用的就是在制作页眉时，通过2个Containner来制作2个不同的页眉，然后通过Responsive设置，让其中一个Containner在移动端影藏，另外一个在PC段隐藏，这样就能实现PC端和移动端不同的Header效果。
四、实操Container结构布局和用法
FlexBox 和Grid是两种布局模式，FlexBox适合高度自由的布局方式，Grid则是按照网格进行布局，不同的布局方式适用不同的场景，你可以根据自己的需求选择对应的布局方式。
4.1 Flexbox Containner
FlexBox Containner是一个弹性的布局方式，可以为你的网站提供一种非常自由的布局的方式。Flexbox 像积木一样拼接组成了一整个网站，把一个网站页面一行一行来切分，每行几乎都可以使用 Flebox 的结构做出来，非常实用。
在Flex布局中，对于一个容器而言，只要往它内部拖入元素，他就会默认垂直的排列方式。也就是像下图这样，组件会自动垂直的向下堆叠，也就是默认，你每拖入一个组件，这个组件的宽度就默认占满当前容器的100%宽度了。
4.1.1 Flexbox 的功能
这里有现成的左右布局（现成布局实操实例1，选不到布局实操实例 2），还有上下两行的布局，先以第一个为例子来说下基础功能。
选择了方向向下的 Flexbox ，添加的所有组件，自动向下堆叠
Flexbox 可以嵌套 Flexbox，而 Grid 不能，Flexbox 可以做更加复杂的结构。对比之前的 Section 有可飞跃的布局效果。
选择了方向向右的 Flexbox ，使用 Elementor 的复制容器里面的嵌套的容器时，复制出来的容器自动向右堆叠
Flexbox 的宽度非常有用，可以更好的设计布局，
例子：从上面 2 行下面 1 行，通过把上面第 1行的宽度设置为 100 px，上面第2 行和下面第 1 行设置为 50px，就可以变为上面 1 行下面 2 行
上面的例子是第1 行设置为 100px，那么中间某个 Flexbox 设置 100px 就可以单独成为一行，而且其他的 Flexbox 布局不变
Flexbox 嵌套的 Flexbox 可以单独设置方向
对 Flexbox 嵌套的 Flexbox 一次性对齐设置内间距
4.1.2 Flexbox Container 现成布局实操
想做嵌套的 Flexbox 的内不同方向的叠放，比如下图非常典型的 Banner 该怎么办呢
只要学会这个结构，就可以掌握 Flexbox 的基础用法
首先是左右结构，选择第三个
依次把标题、文本编辑器、容器（容器中放入 2 个按钮组件）放入左边，图片组件放在右边
因为第一步我们选择容器方向向下，所以按钮所在的容器方向自动向下，我们把按钮所在的容器方向调为水平即可
调完里面的细节，点击最外面的容器，调节最小高度600 左右即可，设置副轴为居中，典型排版的 banner 就做好了，有了外部的基础框架我们才好去润色。
现在从外到内调整，选择最外面的 Container ，点击样式→标准→小画笔→上传图片
选择图片组件，上传图片，如果想要透明背景，一定要抠图
上传之后我们发现特别的空，没有展示完整的背景，继续进行调整，如图的位置、Display Size 是常见的调整。
最外面的 Container 调整之后，再往里面调节细节，选中标题，在内容里面复制粘贴文案
选中文本编辑器，在内容里面复制粘贴
最后把按钮文案修改下
最后调整的结果
4.1.3 Flexbox Container 无现有布局实操
实际实操中，一般是选不到完美的布局的，比如如下布局，Flexbox Container 给出的结构没办法做到，继续要进行一些操作。
首先，分析布局结构
需要3 个Container ，1 个在上面，2 个在下面，必须选择有上下结构的结构
选择第一个 Container ，设置宽度为 100，剩下2 个为 50 即可
或者直接拖拽最下面的Container到上面，也可以形成这个结构。
填入对应组件，再修改从内到外修改细节即可。
4.1.4 Flexbox Containner 总结
1. 根据结构，外层的 Flexbox 布局要先选好，有上下布局必须选择有必须选择有上下布局的结构
2. Flexbox 可以包含 Flexbox 、Grid
3. 每个 Flexbox 都可以单独设定方向插入组件
4.2 Grid Containner
Grid 是网格式设计的，它允许你在两个方向上👉🏻纵向和横向上面控制元素的布局，特别适合简单网格的设计和对齐。
4.2.1 什么时候选择使用 Grid
当你需要在行和列上对齐元素时，展示图片等行列宽度一样的元素，布局比 Flexbox 更简单，网格式分布
4.2.2 Grid 的使用和功能
默认提供的结构如下，会了上面的Container结构后，这种结构随意选择，自己也可以用container容器轻松搭建出来。
选中后左侧布局区域下方可以调整当前Grid的列数和行数，再往对应的内容区拖入我们的组件即可。
Grid 对齐方式
Grid 间距
调整行中 Grid Container 的宽度
组件的排列顺序，选择行为横向，列为纵向
4.2.3 Flexbox 和 Grid 的关系
相互包含，根据对齐方式和布局，组合嵌套使用。
也可以相互转换
五、Containner的其他常用功能和操作
5.1 如何对Container容器内部组件换行
当我们在一个容器中添加了6个图片，但是这样图片展示的空间就会过小，如果我们想让它每3个为一行，要如何做到？
需要两个步骤
1.选中当前容器，点击左侧工具栏中的换行
点击完换行后我们发现是每个图片占了一行，和我们想要的3个图片一行不一样，是因为，容器宽度是100%，直接点击换行后每张图片的宽度也会占到百分百，所以：
2.改变每张图片的宽度百分比为32%，这样100%的空间就刚好可以容纳三张图片
3.选中图片组件，然后在高级设置中将图片组件的宽度改为32%，注意这里改的宽度是高级设置里面的宽度，不是样式里面的图片宽度。
不直接使用33%是因为我们想给各个图片留下一些间距，因为间距的长度也是算在100%的宽度内的，所以我们甚至可以直接宽度为30%都可以。只要你的图片宽度是大于25%并且小于33%的，在不涉及边距的情况下展示的都是一行3个图片。
当我们将6个图片高级设置中的宽度都改成32%的时候，图片就已经自动两行排列，并且每行3张图片。这就是容器换行的概念，是通过组件的百分比来控制的。
5.2 Container容器添加链接
这点相对来说也比之前的更加简单和直接
1.选中容器
2.在布局中找到其他选项
3.在HTML的下拉框中选择a链接
4.在链接框中输入要跳转的链接地址后完成容器链接添加
六、Section 如何转换为Container
Grid Container 和 Flexbox Container 这么好用，Section 转化过去很简单，进入页面编辑之后，选中 Section 点击转化按钮，
转换之后，会在转换的Section模块下方自动复制生成一个一模一样的Containner模块。
确认Containner模块没有问题之后，直接删除上方的Section模块即可完成Section到Containner的转换。
目前Elementor不支持一键整站转换为Containner，需要手动去转换。另外，一旦转换之后将不可逆。
5.1 Elementor导航器中的Containner
在Elementor导航器中你可以看到你的Containner排列和嵌套。
同时你可以修改Containner在导航器中名称，这样可以方便通过导航器快速定位到对应的内容。
5.2 Containner的响应式设置
Elementor编辑器的所有元素都支持响应式设置，Containner也不例外，Containner的响应式比起老板版本的Section设置项目更多，更加灵活。
在编辑视图中你可以切换到响应式模式去调整Containner的响应式效果。
在Containner的所有设置项目中只要是带响应式标记的都是可以在不同终端设置不同的展示效果。并且你可以直接在对应设置项目的通过响应式标记来切换并修改参数。
由于设置项目较多，我这里介绍几个我常用的响应式设置。
1）修改Containner在不同终端的内容的排列顺序
这个我在响应式中经常会使用到，尤其是做图片文章布局时候，在PC端为了美观，我会一个段图片在左边文字在右边，下一段图片在右边而文字在左边。
但是到了移动端之后图片和文字是上线显示的，如果还是按照默认的排序方式显示，那么就会出现图片、文字、文字、图片的顺序，这种方式对于用户来说并不是正确的阅读顺序。
所以我会在移动端通过Containner的Direction设置项去修改内容的显示顺序。
比如说下面这样一个模块，一个Containner中上下排列了2个Containner，上面的Containner左边是图片右边是文字，下面的Containner左边的文字，右边是图片，在PC端显示如下：
但是到了移动端下面的Containner文字就会默认在上面，图片在下面，显示就会不协调，情况如下：
那么我们可以通过Direction选项来设置下面的Containner内容在手机端的显示顺序。
2）修改Containner在不同终端隐藏
在Containner元素的Avanced标签卡中的Visibility设置中你可以设置针对哪些终端显示和隐藏Containner元素。
3）设置Containner内的元素在响应式中的对齐方式
在Containner的Layout标签卡下面的Items设置项目中，有Justify Content和Align Items可以设置在不同终端的Containner内部的元素对其方式。
5.3 Containner的复制与粘贴操作
1) 复制一个Containner
在编辑窗口中选中你需要复制的Containner元素，右击菜单中点击Copy，即可复制当前选中的Containner。
复制是包含Containner内的所有元素内容的。
2）粘贴Containner元素
复制Containner之后，编辑页面移动到你需要粘贴Containner的位置。
如果需要粘贴到某一个Containner的上方位置，可以点击下面的Containner的+号。
在虚线内空白的地方右击，然后在下拉菜单中选择Past菜单。
如果要将复制的Containner粘贴到某一个Containner的内部，可以选中Containner，然后右击，在下拉菜单中选中Past。
说明：原来的Section是不允许这样嵌套粘贴的，这也是Containner灵活的地方。
3）创建Containner副本
选中Containner之后，可以右击点击下拉菜单中的Duplicate菜单，自动创建当前Containner的副本在页面中，并且副本会直接添加在原Containner的下方或者后面。
另外和其他元素一样Containner也支持苦跨站点复制粘贴。在当前网站复制Containner之后，在另外的站点的编辑页面需要粘贴的地方，右击菜单中选择Past Form Other Site。
5.4 Elementor嵌套元素中的Containner
Elementor目前支持了嵌套元素功能，基于这个功能你可以使用Mega 菜单元素，可以在Tab元素Item内部编辑内容。
我们以Tab元素为例子，以前Tab元素的Item内容只能是文本编辑，如果你想用Elementor编辑需要做一个Elementor模版来动态调用。
而现在通过Containner和嵌套元素功能，你可以直接在Tab元素Item内使用Elementor编辑内容，这给页面内容制作带来了很多便捷性。
Elementor原生的Mage Menu也是用相同功能和原理。
七、总结
Container使用起来布局结构会更加的简介，整个页面的dom节点会变少，速度相对应的也会有一点提升，不是很大，很适合熟练使用建站的朋友，新手小白还是之前的形式更加简单，初上手还是先按照我的文章把做整个页面的结构理解透彻，再回过头学习container会简单很多
