Layout 布局

Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。
一行(row)中所有列(col)的span加起来有24

¶基础布局

使用单一分栏创建基础的栅格布局。
通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

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

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

基于断点的隐藏类

Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
import ‘element-ui/lib/theme-chalk/display.css’;
包含的类名及其含义为：

• hidden-xs-only – 当视口在 xs 尺寸时隐藏
• hidden-sm-only – 当视口在 sm 尺寸时隐藏
• hidden-sm-and-down – 当视口在 sm 及以下尺寸时隐藏
• hidden-sm-and-up – 当视口在 sm 及以上尺寸时隐藏
• hidden-md-only – 当视口在 md 尺寸时隐藏
• hidden-md-and-down – 当视口在 md 及以下尺寸时隐藏
• hidden-md-and-up – 当视口在 md 及以上尺寸时隐藏
• hidden-lg-only – 当视口在 lg 尺寸时隐藏
• hidden-lg-and-down – 当视口在 lg 及以下尺寸时隐藏
• hidden-lg-and-up – 当视口在 lg 及以上尺寸时隐藏
• hidden-xl-only – 当视口在 xl 尺寸时隐藏
  

  ¶Row Attributes

  参数	说明	类型	可选值	默认值
  gutter	栅格间隔	number	—	0
  type	布局模式，可选 flex，现代浏览器下有效	string	—	—
  justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start
  align	flex 布局下的垂直排列方式	string	top/middle/bottom	—
  tag	自定义元素标签	string	*	div

¶Col Attributes