Vuetify v-flex元素内的垂直居中

Question

我试图在我的组件上使用垂直空间，或者至少使用框架的flexbox功能。

这是我想要用图像实现的，第一个图像代表我对当前代码的所有内容，第二个是我想要实现的内容：

这是我写的基本标记，如果你想玩它，我会在jsFiddle上复制它：https://jsfiddle.net/tgpfhn8m/357/

<v-layout row wrap>
  <v-flex xs8>
    <v-card class="red" height="400px">
      Fixed Height Card
    </v-card>
  </v-flex>
  <v-flex xs4 class="purple">
    <v-card class="green">
        First Card
    </v-card>
    <v-card class="green">
        Second Card
    </v-card>
  </v-flex>
</v-layout>

我尝试了什么？

我试过各种方法。第一个是将v-layout:column包括在第二列中，并对其应用justify-space-between。没有成功（https://jsfiddle.net/tgpfhn8m/358/）：

<v-flex xs4 class="purple">
  <v-layout column justify-space-between>
    <v-card class="green">
      First Card
    </v-card>
    <v-card class="green">
        Second Card
    </v-card>
  </v-layout>
</v-flex>

我尝试了许多元素和属性的其他组合，但也没有成功。

我究竟做错了什么？甚至可以用原生的Vuetify元素实现我想要的东西吗？

Answer 1

你必须删除中间v-flex。

您还可以在align-end上使用v-layout，其中包含最后一张卡片。

如果要在两列之间保持填充，可以将pr-x类与x一起添加0到5之间的数字到第一个v-flex。

为了保持第二列填充高度，使用fill-height包裹在v-layout上的v-flex。

Fiddle with padding

Spacing doc from Vuetify

代码答案：

<v-app>
   <v-layout row wrap >
      <v-flex xs8 class="pr-3">
         <v-card class="red" height="400px">
            Fixed Height Card
         </v-card>
      </v-flex>
      <v-flex >
         <v-layout column justify-space-between class="purple" fill-height>
            <v-card class="green">
               First Card
            </v-card>
            <v-card class="green">
               Second Card
            </v-card>
         </v-layout>
      </v-flex>
   </v-layout>
</v-app>

Answer 2

对于其他需要此建议的人：

将<v-layout align-center>与<v-flex fill-height>一起使用

这垂直地对齐孩子们：

<v-layout align-center>
  <v-flex fill-height></v-flex>
  <v-flex fill-height></v-flex>
</v-layout>