用Flex实现H5底部操作栏需：①结构上独立容器包裹按钮；②CSS设fixed定位+flex布局，按钮用flex:1等宽；③通过env(safe-area-inset-bottom)适配刘海屏；④主体内容预留padding-bottom防遮挡。
在 H5 商品详情页中，用 Flex 实现底部操作栏（如“加入购物车”“立即购买”按钮组），关键是让操作栏固定在视口底部、水平铺满、按钮等宽或按需分配空间，同时不遮挡内容、适配不同屏幕。
一、结构要简洁合理
底部操作栏应独立于主内容流，推荐用一个外层容器包裹按钮，避免嵌套过深：
- 商品主体内容放在 或普通 div 中，不限高
- 底部栏单独用 或语义化 div
- 不要把操作栏写在商品描述内部，否则滚动时会跟着动
二、Flex 布局核心 CSS 写法
给底部栏容器设为 flex，并控制子项分布：
.bottom-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px; /* 一般 iOS 安全区+按钮高度 ≈ 48–56px */
padding: 0 10px;
background: #fff;
box-shadow: 0 -2px 10px rgba(0,0,0,.05);
z-index: 1000;
}
<p>.bottom-bar > button {
flex: 1; /<em> 等分宽度 </em>/
border: none;
outline: none;
font-size: 14px;
border-radius: 0;
}
如果两个按钮（如“加入购物车”和“立即购买”），flex: 1 自动均分；若三个按钮（加收藏、加购、购买），也适用。想让某按钮更宽（如“立即购买”占 2 份），可设 flex: 2。
三、适配 iPhone X 及以上刘海屏
需避开底部安全区域，用 CSS env() 变量增强兼容性：
- 在 .bottom-bar 上加 padding-bottom: env(safe-area-inset-bottom)
- 确保父容器没有 overflow: hidden 挡住安全区
- H5 页面 meta 需包含
四、滚动时保持悬浮，又不遮正文
关键在主体内容预留底部空间，防止被栏遮挡：
- 给 或内容容器加 padding-bottom: 50px + env(safe-area-inset-bottom)
- 或者用 margin-bottom，但 padding 更稳妥（不影响布局流）
- 避免给 body 设固定高度或 overflow: hidden，否则 iOS 微信里可能无法滚动到底部
