Layout 布局

这是一个 属性型指令，它可以被用在任何元素上。

通过基础的 24 分栏，迅速简便地创建布局。

基础布局

使用单一分栏创建基础的栅格布局。

el-row 与 el-col 可以被轻易的运用在任何元素上，这些指令使元素具备额外的能力。

<div el-row>
  <div el-col span="24"><div class="grid-content bg-purple-dark"></div></div>
</div>
<div el-row>
  <div el-col span="12"><div class="grid-content bg-purple"></div></div>
  <div el-col span="12"><div class="grid-content bg-purple-light"></div></div>
</div>
<div el-row>
  <div el-col span="8"><div class="grid-content bg-purple"></div></div>
  <div el-col span="8"><div class="grid-content bg-purple-light"></div></div>
  <div el-col span="8"><div class="grid-content bg-purple"></div></div>
</div>
<div el-row>
  <div el-col span="6"><div class="grid-content bg-purple"></div></div>
  <div el-col span="6"><div class="grid-content bg-purple-light"></div></div>
  <div el-col span="6"><div class="grid-content bg-purple"></div></div>
  <div el-col span="6"><div class="grid-content bg-purple-light"></div></div>
</div>
<div el-row>
  <div el-col span="4"><div class="grid-content bg-purple"></div></div>
  <div el-col span="4"><div class="grid-content bg-purple-light"></div></div>
  <div el-col span="4"><div class="grid-content bg-purple"></div></div>
  <div el-col span="4"><div class="grid-content bg-purple-light"></div></div>
  <div el-col span="4"><div class="grid-content bg-purple"></div></div>
  <div el-col span="4"><div class="grid-content bg-purple-light"></div></div>
</div>

分栏间隔

分栏之间存在间隔。

当属性的值固定时，也可以直接传入模板字符串。 如 gutter="20"

<div el-row gutter="20">
  <div el-col [span]="6">
    <div class="grid-content bg-purple"></div>
  </div>
  <div el-col span="6">
    <div class="grid-content bg-purple"></div>
  </div>
  <div el-col span="6">
    <div class="grid-content bg-purple"></div>
  </div>
  <div el-col span="6">
    <div class="grid-content bg-purple"></div>
  </div>
</div>

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

<div el-row gutter="20">
  <div el-col [span]="16"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="8"><div class="grid-content bg-purple"></div></div>
</div>
<div el-row :gutter="20">
  <div el-col [span]="8"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="8"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="4"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="4"><div class="grid-content bg-purple"></div></div>
</div>
<div el-row :gutter="20">
  <div el-col [span]="4"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="16"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="4"><div class="grid-content bg-purple"></div></div>
</div>

对齐方式

将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

<div el-row type="flex" class="row-bg">
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple-light"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
</div>
<div el-row type="flex" class="row-bg" justify="center">
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple-light"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
</div>
<div el-row type="flex" class="row-bg" justify="end">
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple-light"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
</div>
<div el-row type="flex" class="row-bg" justify="space-between">
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple-light"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
</div>
<div el-row type="flex" class="row-bg" justify="space-around">
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple-light"></div></div>
  <div el-col [span]="6"><div class="grid-content bg-purple"></div></div>
</div>

Row Attributes

Col Attributes