container布局容器 [ElementUI]

container布局容器

用于布局的容器组件, 方便快速搭建页面的基本结构

创建布局容器:

使用el-container组件创建布局容器

el-container中包含的元素:

1. < el-header> : 顶栏容器
2. < el-aside> : 侧边栏容器
3. < el-main> : 主要区域容器
4. < el-footer> : 底栏容器

• 以上的五个组件(包括el-container)采用了flex布局, 使用前要确定目标浏览器是否兼容
• < el-container>组件的子元素只能是后四者或者是自己本身, 后四者的父元素也只能是< el-container>
  • 当el-container的子元素是自己本身的时候其实就是容器的嵌套

el-container : 外层容器

当外层容器的子元素中包含< el-header>或者< el-footer>的时候排列方式为: vertical(垂直排列), 如果外层容器的子元素中没有< el-header>或者< el-footer>的时候排列方式就是: horizontal(水平排列)

• 通过el-container的direction属性可以设置外层容器内部的排列方式为: vertical(垂直的)或者horizontal(水平的)
• 就是因为这个规定, 所以我们才更要使用容器嵌套:
  • 我们可以一个外层容器中包含el-header或者el-footer, 那么此外层容器中就是垂直排列的, 而在垂直排列的此外层容器的内部我们可以嵌套一个外层容器(el-container), 然后此外层容器中我们可以不包含el-header或者el-footer, 这样那么我们的嵌套在最外层容器的内层的外层容器中的布局方式就是水平排列

容器组件的嵌套使用:

<el-container style = "height : 100%">
    <el-header>我是标题</el-header>
    <!-- 我就是内层嵌套的外层容器组件 -->
    <el-container>
        <el-aside>我是侧边栏</el-aside>
        <el-main>我是中心内容</el-main>
    </el-container>
    <el-footer>我是页脚</el-footer>
</el-container>

容器组件中属性的使用:

一. Container Attributes

1. direction : 子元素的排列方式
   • 可选值(字符串) : horizontal / vectical

二. Header Attributes

1. height : 顶栏高度

三. Aside Attributes

1. width : 侧边栏宽度

四. Footer Attributes

1. height : 底栏高度

单词积累:

vertical : 垂直的

horizontal : 水平的