我试图使用Vuetify网格系统中的flex属性将文本对齐到图像的右下角，但只有justif对我有效，align对此没有任何作用，我试图在v-flex和v-layout中使用align=end，但两者都不起作用。最重要的是，如果我添加一个v-flex，用于v-layout的justify将停止工作。这是我使用Vuetify的第一天，所以我有点迷失了方向，被它拥有的大量属性和组件淹没了，所以我想在这里得到一些帮助：
<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>
a(flexbox仅在父子基础上工作。您有一些针对flex容器(父容器(的属性，还有一些可用于flex项(子容器(。显然，任何flex项也可以是其子项的flex容器。为了更深入地报道flexbox的工作原理，我推荐阅读这篇文章。
b(无论使用什么UI框架/库，只要某个东西似乎不正常，都可以查看它们的示例。找到一个接近你想要的，简单地复制粘贴标记，然后开始播放。
在您的情况下，您不需要<v-container>、<v-layout>或<v-img>内的任何并发症。
简单得多：
<v-card>
<v-img>
<v-card-title />
</v-img>
<v-card-text />
<v-card-actions />
</v-card>
下面是一个工作示例：
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>为了使标题右下对齐，我使用了：
<v-img>上的.align-end//底部对齐<v-card-title>上的.justify-end//向右对齐
注意：justify-end类使用两个条件将元素内容向右对齐：项必须是一个flex容器(也称为：具有display: flex-在<v-card-title>s的情况下为true(并且必须具有flex-direction: row(这是隐式/默认值(
如果它不是一个flex容器，则必须使用text-right类(或者，在普通CSS:text-align: right中(
根据flex-direction值(row|row-reverse|column|column-reverse(，以下任意一项将相应地向右对齐：justify-end|justify-start|align-end|align-start。
因此，与其试图记住："justify-end向右对齐">(这仅在四分之一的可能情况下成立(，不如将flexbox想象为有方向。该方向的左侧/右侧由align-*控制。该方向的前/后由justify-*控制。