flex 完成六等分布局

<template>
  <div class="card-box">
    <div class="card-content">
      <div v-for="item in 6" :key="item" class="card-item">
        {{ item }}
      </div>
    </div>
    <a-pagination
      v-model:current="state.pagination.current"
      v-model:page-size="state.pagination.pageSize"
      :total="state.pagination.total"
      showQuickJumper
      @change="state.pagination.onChange"
      :show-total="state.pagination.showTotal"
      :position="state.pagination.position"
      size="small"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const state = reactive({
  pagination: {
    current: 1,
    pageSize: 10,
    total: 0,
    onChange: (page: number, pageSize: number) => {
      currentChange(page);
      console.log(page, pageSize);
    },
    showTotal: (total: number) => `共 ${total} 条数据`,
    position: ["bottomCenter"],
  },
});

/**
 * 当前页码变化事件
 */
function currentChange(val: number) {
  state.pagination.current = val;
  getData();
}

function getData() {
  console.log("getData");
}
</script>

<style scoped lang="scss">
$bg-color: #fff;
.card-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .card-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding: 12px;
    .card-item {
      width: calc(100% / 3 - 20px);
      height: 50%;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid #ccc;
      &:nth-child(3n + 1) {
        margin-left: 0;
      }
      &:nth-child(3n + 3) {
        margin-right: 0;
      }
      &:nth-child(4) {
        margin-bottom: 0;
      }
      &:nth-child(5) {
        margin-bottom: 0;
      }
      &:nth-child(6) {
        margin-bottom: 0;
      }
    }
  }

  :deep(.ant-pagination) {
    padding: 12px;
    display: flex;
    justify-content: center;
    background-color: $bg-color;
  }
}
</style>