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

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>

这就是我们所追求的：

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

您必须在<v-flex>标签中使用text-xs-right代替align-end（请参阅https://vuetifyjs.coms.com/ru/layout/alignment）。

Answer 4

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

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

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

Answer 6

尝试以下：

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