flex布局下的两个div水平垂直居中后分两行显示如何实现

现在是这个样式

  <div class="mycards">
    <div class="card_item">
      <i class="el-icon-plus icon"></i>
      <div class="menu_name">更多</div>
    </div>
  </div>

CSS样式：

.mycards {
    // 大盒子
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // 校正
    margin-left: -8px;
    margin-top: -8px;
}
.card_item {
    flex: 1;
    width: 22%;
    min-width: 22%;
    max-width: 22%;
    height: 12vh;
    background: #f6f8fe;
    margin: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
        font-size: 40px;
        color: #a5b7f4;
    }
    .menu_name {
        font-size: 14px;
    }
}
.card_item:hover {
    -webkit-box-shadow: #ccc 0px 10px 10px;
    -moz-box-shadow: #ccc 0px 10px 10px;
    box-shadow: #ccc 0px 10px 10px;
    cursor: pointer;
    background: #ffffff;
}

flex-direction:column;