Container 布局容器
优质
小牛编辑
128浏览
2023-12-01
用于布局的指令,方便快速搭建页面的基本结构:
el-container
:外层容器。
el-header
顶栏容器。
el-aside
侧边栏容器。
el-main
主要区域容器。
el-footer
底栏容器。
以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。 此外,子元素只能是后四者,后四者的父元素也只能是 el-container
。
常见页面布局
<div el-container direction="vertical" class="demo-box"> <div el-header>Header</div> <div el-main>Main</div> </div> <div el-container direction="vertical" class="demo-box"> <div el-header>Header</div> <div el-main>Main</div> <div el-footer>Footer</div> </div> <div el-container direction="vertical" class="demo-box"> <div el-header>Header</div> <div el-container> <div el-aside width="200px">Aside</div> <div el-main>Main</div> </div> </div> <div el-container direction="vertical" class="demo-box"> <div el-header>Header</div> <div el-container> <div el-aside width="200px">Aside</div> <div el-container direction="vertical"> <div el-main>Main</div> <div el-footer>Footer</div> </div> </div> </div> <div el-container class="demo-box"> <div el-aside width="200px">Aside</div> <div el-container direction="vertical"> <div el-header>Header</div> <div el-main>Main</div> </div> </div> <div el-container class="demo-box"> <div el-aside width="200px">Aside</div> <div el-container direction="vertical"> <div el-header>Header</div> <div el-main>Main</div> <div el-footer>Footer</div> </div> </div>
Container Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
direction | 子元素的排列方向 | string | horizontal / vertical | horizontal |