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:automargin-left:auto 即可。
这利用 flex 布局,子元素的 margin:auto 能够自动填满剩余空间的特性。

上一篇 下一篇

猜你喜欢

热点阅读