Css 删除v布局内的元素空白[Vue&x2B；Vuetify]

我想在顶部为表单制作一个步进显示，但我似乎不明白为什么会有空白，或者更确切地说，为什么即使在

v-if

就位的情况下，

v-divider

的最后一个间距也会显示出来。我正在使用Vue+Vuetify 1.2

这就是我的模板的外观

<v-layout row style="padding: 25px 0;">
    <v-layout align-center v-for="(item, index) in stepperInfo" v-bind:key="index">
        <div class="ml-4 mr-4 caption">
            <v-layout class="mb-1">
              <v-icon small style="margin: auto;">{{ item.icon }}</v-icon>
            </v-layout>
            {{ item.title }}
        </div>
        <v-divider v-if="index !== stepperInfo.length - 1"></v-divider>
    </v-layout>
</v-layout>

---

如前所述，

v-layout

将

flex:1 auto

样式应用于每个元素/步骤。shorthand属性的第一个值为，当设置为1时，表示元素将展开以填充所有可用空间。这意味着最后一步的容器占用可用宽度的1/5（5步）。由于上一步的内容只包含一个左对齐的图标/文本，因此最后会出现空白。一个简单的方法是阻止你的最后一步增长，从而占据与其他步骤相同的宽度

我找不到使用Veutify提供的道具来控制

flex grow

属性的方法，但您可以在每个步骤上覆盖该属性，如下所示：

<v-layout align-center v-for="(item, index) in stepperInfo" v-bind:key="index" v-bind:style="{'flex-grow': index === (stepperInfo.length - 1) ? 0 : 1}">

您还可以使用

：last child

CSS选择器来选择仅CSS的方法，如本文所示。将

步骤

类应用于父级

v布局

：

<v-layout row style="padding: 25px 0;" class="steps">

---

v-layout

是

flex:11 auto

，五个布局中的每一个占一行宽度的20%。谢谢，Tomhah&Sphinx！我没有意识到这是因为flex属性——感谢您指出这一点！我通过将flex-grow:0应用于最后一个v-divider得到了所需的结果。

<v-layout align-center v-for="(item, index) in stepperInfo" v-bind:key="index" v-bind:class="{'last-step': index === (stepperInfo.length - 1)}">

<v-layout row style="padding: 25px 0;" class="steps">

.steps >:last-child {
  flex-grow: 0 !important;
}