我使用vuetify布局，想将按钮放在右侧，但我发现vuetify属性align-end不起作用，我使用offset-xs9让按钮靠右，但按钮仍然在v-flex中居中，如何使它在末尾？谢谢帮助。
代码如下：
<div id="app">
<v-app id="inspire">
<v-layout row wrap align-end>
<v-flex xs3 offset-xs9 align-end>
<div>
<v-btn primary dark>Normal</v-btn>
</div>
</v-flex>
</v-layout>
</v-app>
</div>
Kael在这里的回答很好，但我觉得这里还有更多需要解释的地方。
首先，这里的问题是使用了xs3 offset-xs9：
<v-flex xs3 offset-xs9 align-end>
这将不允许我们使用flexbox网格系统将内容放置在一个有意义的位置（正如您自己所描述的那样）。
第二个问题是没有正确地使用Vuetify的flexbox网格属性，例如，在v-layout和v-flex上都使用了align-end。
<v-layout row wrap align-end>
<v-flex xs3 offset-xs9 align-end>
我们需要的是：
实现这两个目标，将确保您的内容将放置在 v-layout 容器的右端，并且不使用 xs3 和 offset-xs-9等方式避免出现奇怪的空间。
对于 v-layout，正如 Kael 所提到的，我们需要使用 justify-end。由于您的 v-layout 的方向是 row，因此我们使用 justify 进行水平定位。
而对于 v-flex，我们需要确保它仅占据其内容的宽度。我们将使用 shrink 来实现这一点，因此最终模板应如下所示：
<div id="app">
<v-app id="inspire">
<v-layout row wrap justify-end>
<v-flex shrink>
<v-btn primary dark>Normal</v-btn>
</v-flex>
</v-layout>
</v-app>
</div>
您需要在<v-flex>标签中使用text-xs-right，而不是align-end（请参见https://vuetifyjs.com/ru/layout/alignment）。
text-*-right 用于对齐文本，而不是 flexbox 容器。这是一种非常糟糕的做法。请参见 Kael Watts 的答案，以获取更好的解决方案。 - Narxx<div id="app">
<v-app id="inspire">
<v-layout>
<v-spacer></v-spacer>
<v-btn primary dark>Normal</v-btn>
</v-layout>
</v-app>
</div>
<v-img height="120px" class="white--text" :src="xxxx.img">
<v-layout fill-height column ma-0 >
<v-spacer></v-spacer>
<v-flex class="text-xs-right" shrink>
<span class="grey darken-4">XXXXX</span>
</v-flex>
</v-layout>
</v-img>
试试这个：
<p class="text-xs-right">
<v-btn class="d-inline-block">Normal</v-btn>
</p>
inline-flex，然后将容器视为带有 text-*-right 的 inline 文本容器。请看Kael在这里的答案。 - Narxx
justify适用于主轴方向，而align适用于次轴方向。当使用row时，主轴是水平的，次轴是垂直的。当使用column时，则相反（例如：<v-layout row> ... </v-layout>与<v-layout column> ... </v-layout>）。不理解“使用v-layout而不是v-flex”的意思。你需要在v-layout中使用v-flex。 - Narxx