element ui 学习-01 (Layout 布局)(Container 布局容器)

Layout 布局

用法:

类似于表格的tr和td，el-row标签用于建立一个行，el-col代表行内的各个分栏（数量自定义），一行分为24块，el-col上的span属性用于设定自己占多少块,这个组件没什么可触发的方法。

要点：

• 标签被渲染为div,特性与div一致,即宽度自动100%，高度默认靠内容撑开。

• el-row和el-col的box-sizing都是border-box，即设定的宽高默认包含了内边距和边框。

• 如果每一个el-col的span和offset加起来超过24的话会自动换行

• gutter属性(el-row)用于设定每一块的左右内边距(padding)(不接受负值)：
  如果值为10,则左右内边距都为5px,这样两个el-col看起来就间隔了10px

• offset属性(el-col)用于调整每一块的左外边距(margin)

• flex布局

三个属性(都是el-row的),type=“flex”，justify属性选择横向对齐方式(值可取:end,space-between,space-around,除此之外输入包含空值在内的任何值都会当作start),align属性选择垂直对齐方式,值可取top/middle/bottom.
注意: 用了flex后el-col宽度超过el-row时不再换行，而是按比例集中在一行，（可以自己通过css的flex-wrap改为换行）

• 响应式布局

  基本用处就是根据屏幕尺寸自动调整宽度，详细请点击
  补充:最好还是写上一个span属性作为没达到所要求条件的情况的默认值，否则会出现每个el-col独占一行的情况。

• 基于断点的隐藏类(就是一些class)，即在某些尺寸的屏幕下隐藏元素(应该是display:none)，具体参见官网.

• pop和pull分别控制el-col的左右偏移量,原理是relative的left和right

• el-row和el-col都有一个tag属性用于设定在网页中被渲染为什么标签(试了一下行内元素span依然能用，但是有gutter属性时有冲突)

Container 布局容器

用法:

• 总共五个元素：

el-container：外层容器。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：主要区域容器。

el-footer：底栏容器。
示例

  Header
  Main
  Footer

当子元素中包含 el-header 或 el-footer时，全部子元素(同一级的直接子元素)会垂直上下排列，否则会水平左右排列。
当子元素需要包含别的元素时,也使用el-container元素包裹，其中的元素也有着上面的那条规则，如此便可随心所欲设计。

要点：

• el-header和el-footer有一个height属性

Header

• el-aside有一个width属性

• el-contain有一个direction属性用来控制子元素排列方向，值有horizontal / vertical，前面说当子元素中包含 el-header 或 el-footer时，其实是默认值为vertical,反之为horizontal