container布局容器

Container布局容器是一个使用了flex布局的组件，它可以用来创建包含顶栏、侧边栏、主要区域和底栏的布局容器。 这个布局容器的子元素只能是后四个组件(顶栏容器、侧边栏容器、主要区域容器、底栏容器)，并且后四个组件的父元素也只能是Container布局容器本身。

如果外层容器的子元素中包含顶栏或者底栏，那么子元素会垂直排列；如果外层容器的子元素中不包含顶栏和底栏，子元素会水平排列。你可以通过设置外层容器的direction属性来改变内部子元素的排列方式，可以选择vertical（垂直）或horizontal（水平）。

使用Container布局容器进行嵌套可以实现更灵活的布局方式。比如，你可以在一个外层容器中包含顶栏或者底栏，这样外层容器中的布局就是垂直排列的。然后在垂直排列的外层容器内部再嵌套一个外层容器(el-container)，这样内层的外层容器中的布局方式就是水平排列的。

在使用Container布局容器时，你可以通过设置容器组件的属性来控制布局样式。例如，可以使用direction属性来设置子元素的排列方式，使用height属性来设置顶栏或者底栏的高度，使用width属性来设置侧边栏的宽度等。

总结起来，Container布局容器是一个非常实用的组件，可以帮助我们创建灵活多样的布局容器，同时可以通过设置属性来控制布局样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [container布局容器 [ElementUI]](https://blog.csdn.net/m0_57001006/article/details/125840494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [002_Container布局容器](https://blog.csdn.net/aihiao/article/details/122951940)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]