vuetify.js - 为什么 align-end 在 vuetify 中不起作用

Question

我使用 vuetify 布局，我想在右侧制作按钮，但我发现 align-end这是 vuetify 属性不起作用，我使用 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>

和 online codepen

Answer 1

Vuetify 的网格使用 flexbox .

align-*在垂直轴上操作

您要使用 justify-*让 child 水平翻译

align-*和 justify-*仅适用于弹性容器，因此您可以使用 v-layout而不是 v-flex ，或者只是在同一个 v-layout 上使用这两个属性

这是一个 fixed pen给你。