flex布局配合margin
2024-06-16 本文已影响0人
alue
一个常见的表单 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
能够自动填满剩余空间的特性。