flex布局配合margin

一个常见的表单 footer 如下，包含三个按钮，分别对应 删除、取消、确认.

表单按钮布局

在新建表单时，不应该有删除按钮：

没有删除按钮

实现这种布局的方法有很多，这里提供一个我认为最简单的方法：

<div class="flex">
    <n-button v-if="rowData?.id" class="mr-auto">删除</n-button>
    <n-button class="ml-auto mr-sm">取消</n-button>
    <n-button>确认</n-button>
</div>

只用在父元素上启用 flex 布局，然后前两个按钮分别加入 margin-right:auto 和 margin-left:auto 即可。
这利用 flex 布局，子元素的 margin:auto 能够自动填满剩余空间的特性。