一. 动画

1. 过度样式

(1). 缩放过渡动画 scale-transition

<template>
  <div>
    <v-container grid-list-xs>
      <div class="text-center mb-4">
        <v-btn color="primary" @click="alert = !alert"> Toggle </v-btn>
      </div>
      <v-alert
        :value="alert"
        color="pink"
        dark
        icon="mdi-fingerprint"
        transition="scale-transition"
      >
        <p>
          猎鹰9号（Falcon 9）火箭是美国SpaceX公司研制的可回收式中型运载火箭。
        </p>
        <p>猎鹰9号于2010年6月4日完成首次发射，于2015年12月21日完成首次回收。</p>
        <p>
          美国东部时间2021年4月23日5时49分，SpaceX载人龙飞船搭乘猎鹰9号火箭从佛罗里达州肯尼迪航天中心发射升空，执行商业载人航天任务Crew-2，送4名宇航员前往国际空间站，开展为期6个月的任务。飞船计划于4月24日5时10分对接空间站。
        </p>
      </v-alert>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return { alert: true };
  },
};
</script>

(2). fab过渡动画 fab-transition

transition="fab-transition"

(3). 淡入淡出 fade-transition

transition="fade-transition"

(4). X轴滚动

transition="scroll-x-transition"

(5). X轴反向滚动

transition="scroll-x-reverse-transition"

(6). Y轴滚动

transition="scroll-y-transition"

(7). Y轴反向滚动

transition="scroll-y-reverse-transition"

(8). X轴滑动

滑动和滚动感觉上没有太大差别, 除了方向稍微不同

transition="slide-x-transition"

(9). X轴反向滑动

transition="slide-x-reverse-transition"

(10). Y轴滑动

transition="slide-x-transition"

(11). Y轴反向滑动

transition="slide-y-reverse-transition"

二. 弹性布局

使用响应的flexbox实用程序通过对齐、排列等方式控制flex容器的布局, 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

1. 启用flexbox

你可以将任何元素转换为 flexbox 容器并将该元素的 子元素 转成 flex 元素.

<template>
  <div class="ma-4">
    <div class="d-flex flex-wrap text-center">
      <v-sheet
        color="green white--text"
        outlined
        min-width="200"
        v-for="n in 24"
        :key="n"
        class="ma-1"
      >
        DNA的第{{ n }}本生命之书
      </v-sheet>
    </div>
  </div>
</template>

2. 基于断点的flex

d-flex
d-inline-flex
d-sm-flex
d-sm-inline-flex
d-md-flex
d-md-inline-flex
d-lg-flex
d-lg-inline-flex
d-xl-flex
d-xl-inline-flex

3. flex对齐轴方向

flex-row (默认) 行对齐
flex-row-reverse 行反向对齐
flex-column 列对齐
flex-column-reverse 列反向对齐

如: 行反向对齐

<v-row class="d-flex flex-row-reverse text-center">

如: 列对齐
IE11 和 Safari 可能存在列方向的问题

<v-row class="d-flex flex-column text-center">

如: 列反向对齐
IE11 和 Safari 可能存在列方向的问题

<v-row class="d-flex flex-column-reverse text-center">

当然行列对齐也有断点

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

4. 横轴对齐子类justify

Flex 横轴对齐的子类 justify子类, 默认情况下修改控制x轴上的flex项目

.justify-start  顶头
.justify-end   顶尾
.justify-center   居中
.justify-space-between  间隔均分
.justify-space-around    间隔环绕
.justify-sm-start
.justify-sm-end
.justify-sm-center
.justify-sm-space-between
.justify-sm-space-around
.justify-md-start
.justify-md-end
.justify-md-center
.justify-md-space-between
.justify-md-space-around
.justify-lg-start
.justify-lg-end
.justify-lg-center
.justify-lg-space-between
.justify-lg-space-around
.justify-xl-start
.justify-xl-end
.justify-xl-center
.justify-xl-space-between
.justify-xl-space-around

5. 纵轴对齐子类align

Flex 纵轴对齐的子类 align子类, 默认情况下修改控制y轴上的flex项目

.align-start 顶头
.align-end 顶尾
.align-center 居中
.align-baseline 基准线
.align-stretch 浏览器默认
.align-sm-start
.align-sm-end
.align-sm-center
.align-sm-baseline
.align-sm-stretch
.align-md-start
.align-md-end
.align-md-center
.align-md-baseline
.align-md-stretch
.align-lg-start
.align-lg-end
.align-lg-center
.align-lg-baseline
.align-lg-stretch
.align-xl-start
.align-xl-end
.align-xl-center
.align-xl-baseline
.align-xl-stretch

6. 堆叠方式

.flex-nowrap  不换行
.flex-wrap  换行(默认)
.flex-wrap-reverse 反向换行

flex-nowrap flex-wrap flex-wrap-reverse

.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse

7. 自身对齐 (应用在flex item上)

Flex 纵轴对齐的子类 align-self子类, 默认情况下修改控制x轴上的flex项目

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-auto
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-auto
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-auto
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-auto
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-auto
.align-self-xl-stretch

8. 自动边距 (应用在flex item上)

• mr-auto : 右侧自动边距

<template>
  <div class="ma-4">
    <v-row class="d-flex">
      <v-sheet
        color="green white--text"
        outlined
        width="200"
        height="100"
        v-for="n in 24"
        :key="n"
        class="ma-1 mr-auto"
      >
        DNA的第{{ n }}本生命之书
      </v-sheet>
    </v-row>
  </div>
</template>

• ml-auto : 左侧自动边距

<template>
  <div class="ma-4">
    <v-row class="d-flex">
      <v-sheet
        color="green white--text"
        outlined
        width="200"
        height="100"
        v-for="n in 24"
        :key="n"
        class="ma-1 ml-auto"
      >
        DNA的第{{ n }}本生命之书
      </v-sheet>
    </v-row>
  </div>
</template>

9. 自定义排序

<template>
  <div class="ma-4">
    <v-row class="d-flex">
      <v-sheet dark min-width="200" class="ma-1 order-2"> DNA的第1本生命之书 </v-sheet>
      <v-sheet dark min-width="200" class="ma-1 order-0"> DNA的第2本生命之书 </v-sheet>
      <v-sheet dark min-width="200" class="ma-1 order-1"> DNA的第3本生命之书 </v-sheet>
    </v-row>
  </div>
</template>