element-ui

Element - The world's most popular Vue UI framework

Layout布局

1、el-row，行
2、el-col，列
3、:span，占的份数，共24份
4、:gutter，间隙，不会占span的份数

使用gutter属性的原理是padding，有两个坑：
在el-col里面写style会覆盖掉原有样式，会导致gutter失效
需要在el-col里面写div，并且单独给这个div写背景颜色，gutter才会生效

5、:offset，偏移量

offset只能在el-col末尾元素使用，如果右边还有元素，是会失效的

6、type="flex"，采用flex布局，搭配justify="center|end|space-between|space-around"，默认start
7、:xs、:sm、:md、:lg、 :xl，响应式布局，值是占有的份数，与bootstrap一样
8、还有基于断点的隐藏类

import 'element-ui/lib/theme-chalk/display.css';
hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏

Container 布局容器

<el-container>：外层容器
<el-header>：顶栏容器
<el-aside>：侧边栏容器
<el-main>：主要区域容器
<el-footer>：底栏容器

以上组件采用了 flex 布局࿰