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

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

1 个答案: