Vuetify 2.0：如何从 Vuetify 1.5 实现这种布局？

Question

你好！

我最近开始使用 Vuetify 2.0，但我发现自己陷入了一些我在 Vuetify 1.5 上非常容易实现的事情上。我觉得我错过了一些非常明显的东西。

请帮助我从这个 Vuetify 1.5 模板中获得这个结果：

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid fill-height class="grey darken-4">
        <v-layout fill-height column wrap>
          <v-flex>
            <v-card height="100%">
              <v-card-title>I fill the whole available vertical space.</v-card-title>
            </v-card>
          </v-flex>
          <v-flex shrink>
            <v-card>
              <v-card-title>I'm shrinked to content vertically.</v-card-title>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

https://codepen.io/uatar/pen/rNaxoVV

Answer 1

• column 不再特定于网格，它现在是通用的 flex-column 类
• shrink 应替换为 flex-grow-0 以防止元素增长但不允许其缩小到原始大小以下

除此之外，一切都非常相似：

<v-container fluid class="fill-height grey darken-4">
  <v-row dense class="fill-height flex-column">
    <v-col>
      <v-card height="100%">
        <v-card-title>I fill the whole available vertical space.</v-card-title>
      </v-card>
    </v-col>
    <v-col class="flex-grow-0">
      <v-card>
        <v-card-title>I'm shrinked to content vertically.</v-card-title>
      </v-card>
    </v-col>
  </v-row>
</v-container>

https://codepen.io/kaelwd/pen/abzdMWe?editors=1000