一、基本概念

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等，以實現更靈活且美觀的布局效果。