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的{​​{1}}类与0 {5}之间的数字添加到第一个x。

要保持第二列填充高度，请使用v-flex包裹的fill-height使用v-layout。

Fiddle with padding

Spacing doc from Vuetify

代码回答：

v-flex

Answer 2

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

将 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return sample.first?.articles.count ?? 0 } 与<v-layout align-center>一起使用

这使子项垂直对齐：

<v-flex fill-height>