在 v-flex 元素中验证垂直居中

Question

我正在尝试在我的组件上使用垂直 space-between，或者至少使用框架的 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，其中有最后一张牌。

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

要保持第二列填充高度，请在 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>

在 v-flex 元素中验证垂直居中

Vuetify vertical centering within v-flex element

vuetify.js