理解el-container

一、基本概念

el-container是element-ui框架中的一个容器组件，用于作为页面布局的根节点，是实现协调页面上各个元素的关键。

el-container的主要特点是可以分为上下左右四个方向进行布局，并且可以通过设置内部子元素的尺寸来实现自适应布局。

具体来说，通过为el-container设置direction属性，可以控制布局的方向。例如，direction="vertical"可以实现垂直布局，而direction="horizontal"可以实现水平布局。

二、布局属性

1、flex属性

flex属性控制容器内子元素占据空间的比例，值越大则占据的空间越多。使用时需要在父级元素上设置display:flex。

2、glutter属性

gutter属性控制子元素之间的距离，可传入px或rem单位。建议使用rem，以支持页面缩放功能。

3、justify属性

justify属性控制子元素沿主轴（即direction指定的方向）的对齐方式。可选值包括flex-start、flex-end、center、space-between、space-around和space-evenly。

三、与其他组件的结合

1、与el-aside组件结合实现侧边导航栏

el-aside组件作为侧边栏，可以放置导航栏等内容，通过设置width属性来控制侧边栏的宽度。

2、与el-header/el-footer组件结合实现全屏布局

通过设置el-header/el-footer组件的高度来实现全屏布局。

四、最佳实践

1、采用rem单位实现响应式布局。

2、尽量减少布局嵌套层数，以提高页面渲染性能。

3、使用flexbox控制布局，避免使用浮动或绝对定位实现布局。

4、合理利用布局属性，如justify、flex和glutter等，以实现更灵活且美观的布局效果。