Vuetify vertical centering within v-flex element

Question

I'm trying to use a vertical space-between on my components, or at least use the flexbox capabilities of the framework.

Here is what I want to achieve with an image, the first image represents what I have with my current code and the second is what I want to achieve:

Here is the basic markup I wrote, I reproduced it on a jsFiddle if you want to play with it: 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>

What did I try?

I tried various methods. The first one was to include a v-layout:column into the second column, and apply a justify-space-between to it. Without success (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>

I tried a lot of other combinations of elements and properties, without success either.

What am I doing wrong? Is it even possible to achieve what I want with native Vuetify elements?

Answer 1

You have to delete the middle v-flex.

You can also use align-end on a v-layout with the last card in it.

If you want to keep padding between the two columns, you can add class pr-x with x a number between 0 and 5 to the first v-flex.

To keep the second column filling the height use fill-height on the v-layout wrapped in a v-flex.

Fiddle with padding

Spacing doc from Vuetify

Code answer :

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