在列 Flex 组件之间提供边距/间隙

Question

我试图在 UI 中的按钮（重置过滤器/应用过滤器/保存和应用过滤器）之间提供一些边距，我使用 flex 来对齐按钮，但我无法在按钮之间提供一些边距/间隙纽扣。 知道怎么做

代码：

<div class="d-flex flex-column justify-space-around">
    <v-btn
        text
        style="margin-left: 30px"
        color="primary"
        @click="resetFilter()">
        Reset Filter
    </v-btn>
    <v-btn
        v-if="!updatingSavedFilter"
        color="primary"
        @click="
        applyFilter()
        filterDropdownOpen = false">
        Apply Filter
    </v-btn>
    <v-btn
        color="primary"
        @click="
        validateAndSaveFilter()    
        filterDropdownOpen = "false">
        Save &amp; Apply Filter
    </v-btn>
</div>

Answer 1

您必须设置一个高度才能使用justify-content: space-around。就像在这个例子中一样：

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 300px;
}

.box button {
  height: 50px;
  width: 200px;
}

<div class='box'>
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>

或者您可以使用新的gap 属性。

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 20px;
}

.box button {
  height: 50px;
  width: 200px;
}

<div class='box'>
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>

或者只是设置一个margin-top

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.box button {
  height: 50px;
  width: 200px;
}

.box button:not(:first-child) {
  margin-top: 20px;
}

<div class='box'>
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>

Answer 2

看来您正在使用 Vuetify，对吗？在这种情况下，您可以为每个按钮添加一个边距类：

<v-btn
   text
   style="margin-left: 30px"
   color="primary"
   class="mb-2"
   @click="resetFilter"
>
   Reset Filter
</v-btn>

请参阅 Vuetify 的 spacing 文档。

关于另一个主题：尽量避免使用内联样式。最好加一个类。在这种情况下，你可以有类似的东西

class="mb-2 ml-7"

这将为您提供底部 8 像素的边距和左侧 28 像素的边距。

另外，当传递函数名给@click时，不要执行它，只传递名字（见我上面的例子）。