<template>
  <div>
    <v-sheet
      class="d-flex mb-6 bg-surface-variant"
      height="100"
    >
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
      <v-sheet class="ma-2 pa-2 align-self-start">align-self-start</v-sheet>
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
    </v-sheet>

    <v-sheet
      class="d-flex mb-6 bg-surface-variant"
      height="100"
    >
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
      <v-sheet class="ma-2 pa-2 align-self-end">align-self-end</v-sheet>
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
    </v-sheet>

    <v-sheet
      class="d-flex mb-6 bg-surface-variant"
      height="100"
    >
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
      <v-sheet class="ma-2 pa-2 align-self-center">align-self-center</v-sheet>
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
    </v-sheet>

    <v-sheet
      class="d-flex mb-6 bg-surface-variant"
      height="100"
    >
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
      <v-sheet class="ma-2 pa-2 align-self-baseline">align-self-baseline</v-sheet>
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
    </v-sheet>

    <v-sheet
      class="d-flex mb-6 bg-surface-variant"
      height="100"
    >
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
      <v-sheet class="ma-2 pa-2 align-self-auto">align-self-auto</v-sheet>
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
    </v-sheet>

    <v-sheet
      class="d-flex mb-6 bg-surface-variant"
      height="100"
    >
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
      <v-sheet class="ma-2 pa-2 align-self-stretch">align-self-stretch</v-sheet>
      <v-sheet class="ma-2 pa-2">Flex item</v-sheet>
    </v-sheet>
  </div>
</template>
