为什么 align-end 在 vuetify 中不起作用答案

【问题标题】：Why align-end does not work in vuetify为什么 align-end 在 vuetify 中不起作用
【发布时间】：2018-02-14 07:18:45
【问题描述】：

我使用 vuetify 布局，我想在右侧制作按钮，但我发现 align-end 这是 vuetify 属性不起作用，我使用 offset-xs9 制作按钮右侧，但按钮在 @ 居中987654324@，怎么搞定？帮忙谢谢

代码如下：

<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

【问题讨论】：

标签： vuetify.js

【解决方案1】：

Vuetify 的网格使用flexbox。

align-* 在垂直轴上运行
您想为孩子使用justify-* 水平翻译它
align-* 和 justify-* 仅适用于弹性容器，因此您可以使用 v-layout 而不是 v-flex，或者只在同一个 v-layout 上使用这两个属性

这是给你的fixed pen。

【讨论】：

谢谢您，先生，您为我节省了很多时间
这是一个很好的答案。不过有一条评论，justify 在主方向轴上工作，align 在辅助轴上工作。使用row时，主轴是水平的，辅助是垂直的。使用column 时，情况正好相反（例如：<v-layout row> ... </v-layout> 与<v-layout column> ... </v-layout>。不明白“使用v-layout 而不是v-flex。你需要在@987654339 中使用v-flex @.

【解决方案2】：

这里的凯尔回答很好，但我觉得这里还有更多需要解释的地方。

这里的第一个问题是使用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 提到的，我们需要使用 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>

【讨论】：

【解决方案3】：

您必须在<v-flex> 标签中使用text-xs-right 而不是align-end（参见https://vuetifyjs.com/ru/layout/alignment）。

【讨论】：

text-*-right 用于对齐文本。不是 flexbox 容器。这是一个非常糟糕的做法。请参阅 Kael Watts 的答案以获得更好的解决方案。

【解决方案4】：

您也可以使用 v-spacer 将任何东西推到右侧。

<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>

【讨论】：

【解决方案5】：

如果你想将你的元素对齐到右下角，你可以这样做：

<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>

【讨论】：

【解决方案6】：

试试这个：

<p class="text-xs-right">
      <v-btn class="d-inline-block">Normal</v-btn>
</p>

【讨论】：

请add对你的回答做一些解释
这是错误的方法。您将容器转换为inline-flex，然后将容器视为带有text-*-right 的inline 文本持有者。在这里查看 Kael 的答案。