为什么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>

和在线codepen

Answer 1

Vuetify的网格使用flexbox.

• align-* 在垂直轴上操作
• 你想用justify-*孩子水平翻译它
• align-*并且justify-*只能在flex容器上工作,所以你可以使用一个v-layout而不是v-flex,或者只使用两个属性v-layout

这是给你的固定笔.

Answer 2

凯尔在这里的回答很好，但我觉得这里有更多的解释。

这里的第一个问题是使用xs3 offset-xs9：

<v-flex xs3 offset-xs9 align-end>

这将不允许我们使用flexbox网格系统将内容放置在有意义的地方（正如您自己描述的那样）。

第二个问题是错误地使用了 Vuetify 的 flexbox 网格属性，例如，align-end在v-layout和v-flex.

<v-layout row wrap  align-end>
      <v-flex xs3 offset-xs9 align-end>

这是我们所追求的：

1. 将所有内容放在其最右侧的布局
2. 一个容器，只占用其内容所需的大小

实现这两个目标，将确保您的内容将放在右端v-layout容器，你会避免各种怪异空间的使用xs3和offset-xs-9等。

因此，对于v-layout，正如 Kael 所提到的，我们需要使用justtify-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>

Answer 3

您必须使用text-xs-rightin<v-flex>标记而不是align-end（请参阅https://vuetifyjs.com/ru/layout/alignment）。