使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理，

代码如下

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'//A Vue.js 2.0 UI Toolkit for Web
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

可是效果如下：

奇怪了，为何布局变成了纵向，明明row中的布局应该是按列排列的。经过排查发现自己少了这一行：import ‘element-theme-chalk';

也就是代码应该如下：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'//A Vue.js 2.0 UI Toolkit for Web
import 'element-theme-chalk';
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

这个时候效果如下，应该是我们希望看到的，至少列生效了：

我看了一下文档，发现并没有特别指出这一行的配置，可能是我遗漏了或者其他的原因导致的，也有可能是官网没有标识出这一点。总之加上了这一行配置解决了我的问题。在这里做一个笔记，也希望能够帮助到遇到类似的问题的同学。