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  佈局中的分欄佈局，會根據設置的列數自動佈局