用flex布局实现优惠券金额左对齐、领取按钮右对齐：容器设display: flex、justify-content: space-between、align-items: center；金额区域flex: 1；按钮设固定宽高+flex-shrink: 0。
用 Flex 布局实现“优惠券左侧显示金额、右侧显示‘领取’按钮”，关键是让金额区域自适应宽度、按钮固定宽度，同时整体保持一行内对齐且比例协调。核心是设置容器为 display: flex，并合理使用 flex 相关属性控制子元素伸缩行为。
容器设为 Flex 并两端对齐
给优惠券卡片（或行容器）设置：
-
display: flex启用弹性布局 -
justify-content: space-between让左右两部分自动撑开，分别贴左贴右 -
align-items: center垂直居中，避免文字和按钮上下错位
金额区域设为 flex: 1 占满剩余空间
左侧金额（如 <span class="amount">¥50</span>）建议：
- 添加
flex: 1—— 表示它会占据父容器中除其他固定尺寸子项外的所有可用空间 - 可加
text-align: left和适当padding保证视觉舒适 - 避免设固定宽度，否则在小屏下易换行或溢出
领取按钮设固定宽高+收缩不伸展
右侧“领取”按钮（如 <button class="btn-get">领取</button>）建议：
- 设固定宽度（如
width: 72px）和高度（如height: 32px） - 添加
flex-shrink: 0防止在窄屏下被压缩变形 - 可配合
white-space: nowrap防止“领取”二字换行
适配移动端的小技巧
在 H5 页面中需兼顾不同屏幕，可补充：
- 对金额文字用
font-size: clamp(14px, 4vw, 18px)实现响应式字号 - 按钮圆角、背景色、禁用态样式要明确，提升点击反馈
- 整个优惠券行建议最小高度（如
min-height: 48px），避免过扁影响触控
