flex布局配合margin
2024-06-16 本文已影响0人
alue
一个常见的表单 footer 如下,包含三个按钮,分别对应 删除
、取消
、确认
.
![](https://img.haomeiwen.com/i25380/b458ebd024458c07.png)
在新建表单时,不应该有删除按钮:
![](https://img.haomeiwen.com/i25380/568084a70499f0b5.png)
实现这种布局的方法有很多,这里提供一个我认为最简单的方法:
<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
能够自动填满剩余空间的特性。