Element之container容器布局

作用:用来快速搭建页面基本结构

<el-container>:最外层容器标签

<el-header>:头部容器标签

<el-aside>:侧面容器标签

<el-main>:主要内容容器标签

<el-footer>:底部容器标签

注：以上标签采用的是flex弹性盒布局，本人还是比较喜欢用的(不会的可以去搜索相关教程，还是比较实用的)

常见的页面布局：

1.header+main

<el-container>

        <el-header></el-header>

        <el-main></el-main>

</container>

2.heaer+main+footer

<el-container>

        <el-header></el-header>

        <el-main></el-main>

        <el-footer></el-footer>

</container>

3.aside+main

<el-container>

        <el-aside></el-aside>

        <el-main></el-main>

</container>

 

4.header+aside+main 

<el-container>

        <el-header></el-header>

        <el-container>   

                <el-aside></el-aside>

                <el-main></el-main>

        </el-container>

</container>

5.header+aside+main+footer

<el-container>

        <el-header></el-header>

        <el-container>   

                <el-aside></el-aside>

                <el-main></el-main>

                <el-footer></el-footer>

        </el-container>

</container>

6. aside+header+main

<el-container>

         <el-aside></el-aside>

        <el-container>   

                <el-header></el-header>

                <el-main></el-main>

        </el-container>

</container>

 

7.aside+header+main+footer

<el-container>

         <el-aside></el-aside>

        <el-container>   

                <el-header></el-header>

                <el-main></el-main>

                <el-footer></el-footer>

        </el-container>

</container>

 

总结:个人感觉还是很方便的