Vuetify vertical centering within v-flex element
For anyone else who needed this advice:
Use <v-layout align-center>
together with <v-flex fill-height>
This vertically aligns the children:
<v-layout align-center>
<v-flex fill-height></v-flex>
<v-flex fill-height></v-flex>
</v-layout>
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>