理解el-container

一、基本概念

el-container是element-ui框架中的一個容器組件，用于作為頁面布局的根節(jié)點，是實現(xiàn)協(xié)調(diào)頁面上各個元素的關(guān)鍵。

el-container的主要特點是可以分為上下左右四個方向進行布局，并且可以通過設(shè)置內(nèi)部子元素的尺寸來實現(xiàn)自適應布局。

具體來說，通過為el-container設(shè)置direction屬性，可以控制布局的方向。例如，direction="vertical"可以實現(xiàn)垂直布局，而direction="horizontal"可以實現(xiàn)水平布局。

二、布局屬性

1、flex屬性

flex屬性控制容器內(nèi)子元素占據(jù)空間的比例，值越大則占據(jù)的空間越多。使用時需要在父級元素上設(shè)置display:flex。

2、glutter屬性

gutter屬性控制子元素之間的距離，可傳入px或rem單位。建議使用rem，以支持頁面縮放功能。

3、justify屬性

justify屬性控制子元素沿主軸（即direction指定的方向）的對齊方式?？蛇x值包括flex-start、flex-end、center、space-between、space-around和space-evenly。

三、與其他組件的結(jié)合

1、與el-aside組件結(jié)合實現(xiàn)側(cè)邊導航欄

el-aside組件作為側(cè)邊欄，可以放置導航欄等內(nèi)容，通過設(shè)置width屬性來控制側(cè)邊欄的寬度。

2、與el-header/el-footer組件結(jié)合實現(xiàn)全屏布局

通過設(shè)置el-header/el-footer組件的高度來實現(xiàn)全屏布局。

四、最佳實踐

1、采用rem單位實現(xiàn)響應式布局。

2、盡量減少布局嵌套層數(shù)，以提高頁面渲染性能。

3、使用flexbox控制布局，避免使用浮動或絕對定位實現(xiàn)布局。

4、合理利用布局屬性，如justify、flex和glutter等，以實現(xiàn)更靈活且美觀的布局效果。