vuetify.js - 验证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>

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

我在做什么错？甚至可以通过 native Vuetify元素实现我想要的功能吗？

Answer 1

您必须删除中间的v-flex。

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

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

为了使第二列保持高度，请在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>