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

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。

您也可以在带有最后一张卡片的 v-layout 上使用 align-end。

如果您想在两列之间保持填充，您可以在第一个 v-flex 中添加类 pr-x 和 x 一个介于 0 和 5 之间的数字。

要保持第二列填充高度，请在 v-layout 上使用 fill-height 包裹在 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>