Align text in card to the bottom right of the image - vue.js

Question

I'm trying to use the flex properties in the Vuetify's grid system to align the text to the bottom right of the image but only the justify is working for me, align is doing nothing for me, I tried to use align-end in the v-flex and in the v-layout but neither is working. On top of that, if I add a v-flex the justify that used to work for the v-layout stops working. It's the first day I use Vuetify so I'm a bit lost and overwhelmed with the large number of properties and components it has so I would like some help here:
<v-card>
<v-img src="https://images.pexels.com/photos/3992952/pexels-photo-3992952.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<v-container>
<v-layout justify-end>
<span class="headline white--text">Lorem, ipsum dolor.</span>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<h2>Lorem, ipsum dolor.</h2>
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio doloribus tempore distinctio dolorem blanditiis iusto cupiditate accusantium provident consectetur quisquam repellat quo aliquam quia placeat incidunt natus eveniet ipsa ipsum aut, animi suscipit alias sequi. Sapiente totam omnis molestiae adipisci.
</v-card-text>
<v-card-actions>
<v-btn color="info" text>Action</v-btn>
</v-card-actions>
</v-card>

Answer 1

a) flexbox only works on a parent-child basis. You have a few properties aimed at the flex container (the parent) and a few usable on the flex items (the children). Obviously, any flex item can also be a flex container for its own children. For a more in-depth coverage of how flexbox works I recommend this read.
b) whenever something doesn't seem to work right, regardless of the UI framework/library you use, have a look at their examples. Find one that's close to what you're after and simply copy-paste the markup and then start playing.
In your case, you don't need <v-container>, <v-layout> or any of those complications inside <v-img>.
It's way simpler:
<v-card>
<v-img>
<v-card-title />
</v-img>
<v-card-text />
<v-card-actions />
</v-card>
Here's a working example:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
#app {
margin: 20px 0;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-card class="mx-auto" max-width="400">
<v-img class="white--text align-end"
src="https://images.pexels.com/photos/3992952/pexels-photo-3992952.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<v-card-title class="justify-end">Lorem, ipsum dolor.</v-card-title>
</v-img>
<v-card-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio doloribus tempore distinctio dolorem blanditiis iusto cupiditate accusantium provident consectetur quisquam repellat quo aliquam quia placeat incidunt natus eveniet ipsa ipsum aut, animi suscipit
alias sequi. Sapiente totam omnis molestiae adipisci.
</v-card-text>
<v-card-actions>
<v-btn large color="primary">Action</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
In order to make the title bottom right aligned I used:
.align-end on <v-img> // bottom align
.justify-end on <v-card-title> // align right
Note: justify-end class aligns element contents to the right with two conditions: the item has to be a flex container (a.k.a: have display: flex
- true in the case of <v-card-title>s) and has to have flex-direction: row (which is the implicit/default value).
If it's not a flex container, you have to use text-right class (or, in plain CSS: text-align: right).
Based on flex-direction value (row|row-reverse|column|column-reverse) any of the following would align to the right, accordingly: justify-end|justify-start|align-end|align-start.
So, rather than trying to remember: "justify-end aligns to the right" (which is only true in 1 out of 4 possible cases), visualize flexbox as having a direction. What's left/right of that direction is controlled by align-*. What's front/back on that direction is controlled by justify-*.

Answer 2

You dont need to use v-container or v-layout in this case, just need to add align-end class on your v-img and justify-end class on the image title.
<!-- your sample code -->
<v-card>
<v-img class="align-end" src="https://images.pexels.com/photos/3992952/pexels-photo-3992952.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<v-card-title class="justify-end">Lorem, ipsum dolor.</v-card-title>
</v-img>
<v-card-title>
<h2>Lorem, ipsum dolor.</h2>
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio doloribus tempore distinctio dolorem blanditiis iusto cupiditate accusantium provident consectetur quisquam repellat quo aliquam quia placeat incidunt natus eveniet ipsa ipsum aut, animi suscipit alias sequi. Sapiente totam omnis molestiae adipisci.
</v-card-text>
<v-card-actions>
<v-btn color="info" text>Action</v-btn>
</v-card-actions>
</v-card>
You can always get example from Vuetify official documentation.