理解el-container

一、基本概念

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

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

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

二、布局屬性

1、flex屬性

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

2、glutter屬性

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

3、justify屬性

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

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

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

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

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

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

四、最佳實(shí)踐

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

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

3、使用flexbox控制布局，避免使用浮動(dòng)或絕對(duì)定位實(shí)現(xiàn)布局。

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