H5 中 Flex 布局怎么实现商城商品详情底部操作栏-H5教程-PHP中文网

用Flex实现H5底部操作栏需：①结构上独立容器包裹按钮；②CSS设fixed定位+flex布局，按钮用flex:1等宽；③通过env(safe-area-inset-bottom)适配刘海屏；④主体内容预留padding-bottom防遮挡。

h5 中 flex 布局怎么实现商城商品详情底部操作栏

在 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;
}
</p>

如果两个按钮（如“加入购物车”和“立即购买”），flex: 1 自动均分；若三个按钮（加收藏、加购、购买），也适用。想让某按钮更宽（如“立即购买”占 2 份），可设 flex: 2。