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-*让孩子横向翻译
align-*和justify-*仅适用于Flex容器，因此您可以使用v-layout代替v-flex，或者只使用同一v-layout上的两个属性1}}

这是fixed pen给你的。

Answer 2

您必须在Set rRng = Sheet1.Range("E2:E15") For Each c In rRng.Cells If c.Value = "" Then MsgBox "Please fill in cell " & c.Address Exit For End If Next代码中使用text-xs-right而不是<v-flex>（请参阅https://vuetifyjs.com/ru/layout/alignment）。

Answer 3

您还可以使用v-spacer将任何内容推到右侧。

from django.urls import path
from . import views

app_name = 'aclapp'
urlpatterns = [
    path('', views.index, name='index'),
    path('aclapp/', views.index, name='index'),
    path('submit/', views.submit, name='submit'),
]

Answer 4

尝试一下：

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

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

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

这里的第一个问题是使用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>

这就是我们所追求的：

一种将所有内容放置在其最右侧的布局
仅占用内容所需大小的容器

实现这两个目标，将确保您的内容将放置在v-layout容器的右端，并且您将避免使用xs3和offset-xs-9产生各种奇怪的空格，并且等等。

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

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

6 个答案: