Element-UI 使用心得之el-card

el-card 是Element-UI  内置的卡片组件，使用起来很方便，但是对Vuejs和html 不是精通的话，根据自己的要求布局，会出现自己的小困惑，必须添加垂直居中，按照CSS 布局设置，总是 不起作用，与其费力搜寻办法，不如自己简单白痴的去设置一下

1.鼠标放上去有一个动画效果：

  .el-card {
    min-width: 380px;
    margin-right: 20px;
    transition: all .5s;
  }
  .el-card:hover{
    margin-top: -5px;
  }

2.第三个卡片中的按钮，做到水平垂直效果  ：继承原来的布局属性，加上自己的布局设置

      <el-card class="box-card " style="min-height: 200px;" align="middle" onclick="">
        <div class="el-card__body mid">
          <el-button  icon="el-icon-circle-plus" circle></el-button>
          <el-button style="margin-left: 0;color: #505458" type="text">添加APP</el-button>
      </div>

  .mid{
    margin-top: 25%;
    height: 50%;
  }

 

3.当显示多个卡片时，一直水平排列 ，不能够自动换行，这时候 只能在外层使用 Layout  布局中的分栏布局，会根据设置的列数自动布局