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.

填充填充物

来自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>