Vuetify v-container 与填充高度项目对齐答案

【问题标题】：Vuetify v-container with fill-height items alignmentVuetify v-container 与填充高度项目对齐
【发布时间】：2021-11-17 11:41:54
【问题描述】：

我是 Vue 和 Vuetify 的新手，这可能很明显，但我在谷歌上搜索了一个多小时，我仍然很愚蠢。所以基本上我想使用视口的全高创建包装器，其中一个元素对齐顶部和一个底部（这将在 v-navigation-drawer 内，顶部和一个底部的几个按钮）

这里是示例代码

 <v-container fluid fill-height>
   <v-row align="start">
     <v-col>I want this to align Top</v-col>  
   </v-row>
   <v-row align="end">
     <v-col>And this to align Bottom</v-col>  
   </v-row>
 </v-container>

这就是它的外观https://codepen.io/rafal_w/pen/ExXeeWm

正如您所见，fill-height 标签将元素与边距均匀对齐，而元素上的对齐标签不起作用。我做错了什么？

【问题讨论】：

你根本不想使用css？
我想我最终必须这样做，但现在我只是好奇为什么它不起作用，它应该根据文档

标签： vuetify.js

【解决方案1】：

在我看来，使用 Vuetify 做到这一点的更好方法如下：

<v-app id="app">
  <v-card height="1000">
    <v-app-bar
      color="red"
      dense
      fixed
      flat
      dark
    >
      <v-spacer></v-spacer>
      <span>Align Top</span>
      <v-spacer></v-spacer>
    </v-app-bar>
  </v-card>
  <v-bottom-navigation fixed color="green">
    <v-spacer></v-spacer>
    <span>Align Bottom</span>
    <v-spacer></v-spacer>
  </v-bottom-navigation>
</v-app>

【讨论】：

我简化了我的例子。我知道如果它是主工作区，我可以使用 v-app-bar 和 v-footer。但我希望它位于侧面导航栏内，这就是为什么我使用 v-container 和 v-row/v-col

【解决方案2】：

好的，所以我应该使用 align-self-start 和 align-self-end 类而不是子项上的 align 标签

https://codepen.io/rafal_w/pen/WNOaXVL

  <v-container fluid fill-height>
    <v-row class="align-self-start">
      <v-col>I want this to align Top</v-col>  
    </v-row>
    <v-row class="align-self-end">
      <v-col>And this to align Bottom</v-col>  
    </v-row>
  </v-container>

【讨论】：

非常感谢！当我尝试对齐全高容器中的项目时，这一直让我感到：-P 在 Vuetify 中对齐内容的类和属性的组合对我来说真的不直观......