一、问题背景
最近在做 uni-app 小程序项目时，底部操作栏里有两个按钮：
-
左边是"收藏"
-
右边是"转发"
其中"收藏"用的是 view，而"转发"因为要使用微信小程序分享能力，只能写成 button。
结果就出现了一个非常典型的问题：
-
两个按钮明明都用了 flex
-
图标和文字结构也差不多
-
但就是怎么都对不齐
-
转发按钮总感觉比收藏按钮"胖一点""高一点"或者"内边距不对"
这类问题在 uni-app 和微信小程序里非常常见，本质上并不是你的 flex 写错了，而是 button 组件自带基础样式，尤其在加了 open-type 之后，默认表现和普通 view 完全不是一回事。
二、问题现象
比如下面这段代码：
样式看起来也很普通：
但运行起来后你会发现：
-
view.icon-btn 没问题
-
button.icon-btn 总是和左边不齐
-
有时是高度不一样
-
有时是文字基线不一样
-
有时是按钮自带的边框、圆角、内边距把布局撑开了
三、根本原因
1. button 不是普通容器
在微信小程序里，button 是原生表单组件，本身就带有默认样式，比如：
-
默认内边距
-
默认高度和最小宽度
-
默认行高
-
默认圆角
-
默认边框
-
默认点击态
-
button::after 伪元素边框
所以即使你给 button 和 view 写了同一个 class，它们渲染出来也不一定一样。
2. open-type="share" 必须绑定在 button 上
微信分享能力通常要求使用 button 并设置：
open-type="share"
这就意味着很多时候你没法直接把它改成 view，只能保留 button，然后自己手动"抹平"它的默认样式。
四、解决思路
解决方案很简单：
保留 button open-type="share"，但把它的默认按钮基础样式全部重置掉。
重点处理这些属性：
-
padding
-
margin
-
line-height
-
min-width
-
border
-
border-radius
-
box-shadow
-
background
-
button::after
五、推荐写法
模板代码
（此处原始代码缺失）
样式代码
（此处原始代码缺失）
六、为什么这套写法有效
padding: 0
去掉按钮默认内边距，防止比 view 更"胖"。
margin: 0
避免原生按钮额外外边距影响布局。
line-height: 1
很多时候文字不齐平，和按钮默认行高有直接关系。
min-width: auto
某些端上按钮可能有默认最小宽度，导致看起来宽一些。
border-radius: 0
去掉按钮默认圆角。
box-shadow: none
避免按钮自带阴影或点击态视觉影响。
background: transparent
让它看起来更像普通容器。
&::after { border: none; }
这个非常关键。
微信小程序的 button 通常会带一个 ::after 边框，不去掉的话，即使你把 border 写成 0，看起来仍可能不一致。
七、如果还是不齐怎么办
如果你已经把按钮基础样式抹掉了，但还是感觉和左边不完全一致，可以继续做两件事：
1. 给两个按钮统一宽高
或者统一内容区最小尺寸。
2. 统一图标尺寸和文字间距
很多时候不是容器不齐，而是：
-
左边图标 28
-
右边图标 20
图标本身大小不同，也会导致视觉上看起来不齐。
建议统一图标尺寸，并统一文字间距。
八、项目实战经验
我这次遇到的问题就是：
-
"收藏"按钮是 view
-
"转发"按钮是 button open-type="share"
-
两边都用了同一个 icon-btn
-
但转发按钮始终不齐平
最后排查下来，根因就是：
button 的默认基础样式没有被清除。
把下面这段补上后，布局立刻正常：
（此处原始代码缺失）
九、总结
在 uni-app / 微信小程序里，只要你用了：
open-type="share"
就要默认警惕一件事：
它不是普通的布局容器，而是带原生样式的按钮组件。
所以如果你发现：
-
和 view 不齐平
-
高度不一致
-
内边距奇怪
-
明明用了 flex 还是看起来不对
优先不要怀疑布局逻辑，先去检查 button 的默认样式有没有被重置。
一句话总结：
不是 flex 不生效，而是 button open-type 自带的默认样式把布局悄悄改掉了。
十、可直接复用的最终版本
javascript
<template>
<view class="action-left">
<view class="icon-btn" @click="handleCollect">
<uv-icon name="heart" size="24" color="#333"></uv-icon>
<text class="icon-text">收藏</text>
</view>
<button class="icon-btn" open-type="share" @click="handleShare">
<uv-icon name="share" size="24" color="#333"></uv-icon>
<text class="icon-text">转发</text>
</button>
</view>
</template>
<style scoped lang="scss">
.action-left {
display: flex;
gap: 50rpx;
}
.icon-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0;
margin: 0;
line-height: 1;
min-width: auto;
border-radius: 0;
box-shadow: none;
overflow: visible;
&::after {
border: none;
}
.icon-text {
font-size: 20rpx;
color: #333;
margin-top: 4rpx;
}
}
</style>