<template>
  <div v-loading="loading">
    <div>行列flex的用法</div>
    <div class="flex center align-center">
      <div class="flex column">
        <div class="demo">1</div>
        <div class="demo">2</div>
      </div>
      <div class="demo">3</div>
    </div>
    <div class="flex around">
      <div class="flex column">
        <div class="demo">1</div>
        <div class="demo">2</div>
      </div>
      <div class="demo">3</div>
    </div>
    <div class="flex between">
      <div class="flex column">
        <div class="demo">1</div>
        <div class="demo">2</div>
      </div>
      <div class="demo">3</div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, onMounted } from '@vue/composition-api';

export default {
  setup() {
    const loading = ref<boolean>(false);
    return{
      loading,
    };
  },
};
</script>
<style lang="scss">
  .demo{
    width: 100px;
    height: 100px;
    border: 1px black solid;
  }
</style>
