变分垂直间距

Question

11/10天太晚了，我正处于白痴状态，但我们走吧.

我有一个导航链接列表(v-列表-项目在v-列表中).

我正试着把其中一个链接放在抽屉底部。由于某些原因，即使是自定义CSS也没有移动它，所以我被卡住了。

以下是我所得到的，任何帮助的感谢：

 <v-navigation-drawer v-model="drawer" app clipped>
  <v-list>
    <!-- Navbar is displayed with for loop -->
    <v-list-item
      link
      v-for="(link, index) in links"
      :key="index"
      router
      :to="link.route"
    >
      <v-list-item-action>
        <v-icon>mdi-{{ link.icon }}</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title>{{ link.name }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-list-item
      link
      router
      :to="'/feature-request'"
      class="text--disabled"
      :align-self="end"
    >
      <v-list-item-action>
        <v-icon class="text--secondary">mdi-star-circle-outline</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title class="text--secondary"
          >Feature Request</v-list-item-title
        >
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

Answer 1

你可以使用flex来实现你想要的。对于最后一项，设置类mt-auto，它将最后一项放在底部。这里仍然存在一个gotcha，v-list-item有一个内置的flex类属性，因此您需要重写它：

.v-list-item {
  flex: 0;
}

因此，将列表设置为完全高度和位置弯曲：

<v-list class="d-flex flex-column" height="100%">

按照您已有的方式迭代第一项，对于最后一项，将前面提到的mt-auto放在

<v-list-item class="mt-auto">

A CODEPEN 供您参考。