05.Element UI布局容器(搭建页面基础结构)

一、Container布局容器

    |--作用:用于页面布局的组件,方便快速搭建页面的基础结构。

    |--涉及到的组件:

        |--el-container:外层容器,当子元素包含header和footer时,全部子元素会垂直上下排列,否则会水平左右排列。

        |--el-header:顶栏容器

        |--el-aside:侧边栏容器

        |--el-main:主要区域容器

        |--el-footer:底栏容器

    |--需要注意:以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,<el-container> 的子元素只能是后四者,后四者的父元素也只能是 <el-container>。

    |--示例:

基础页面布局
对应上面代码中三个布局
带有侧边栏布局
页面效果
header100%带侧边栏
布局效果
布局效果
布局效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容