根本原因是父容器未设display: flex，或子元素被float/position: absolute脱离弹性流；按钮外层包装div未设width: 100%也会导致失效。
flex布局里按钮左右撑开，为什么justify-content: space-between没用？
常见现象是两个按钮紧挨着左对齐，或者右边按钮被挤出容器——根本原因通常是父容器没设display: flex，或子元素被float/position: absolute干扰了弹性流。另外，如果按钮外层还套了一层div但没设width: 100%，flex行为也会失效。
- 确认父容器（比如
.dialog-footer）有display: flex且无flex-direction: column - 按钮必须是直接子元素；若中间有包装层，要么把包装层也设为
flex，要么把按钮提一级 - 避免给按钮加
float、vertical-align或position: absolute，这些会脱离flex上下文 - 移动端要注意
min-width: fit-content可能让按钮过宽，撑破容器
取消按钮左对齐、确认按钮右对齐，但要保持等宽怎么办？
单纯靠justify-content只能控制分布，不能约束尺寸。等宽需求本质是尺寸控制问题，不是排列问题。
- 给两个按钮都加
flex: 1，它们会均分剩余空间（注意：需父容器有明确宽度） - 如果想保留文字宽度自适应，又需要右侧按钮右对齐，改用
margin-left: auto作用于确认按钮——它会把右侧按钮“推”到最右，取消按钮自然留在左边 - 慎用
width: 50%：在小屏下可能换行或溢出，且无法响应文字长度变化 - IE11不支持
flex: 1缩写，得写全flex: 1 1 0
按钮间距太大或太小，怎么微调又不破坏左右分布？
用gap最干净，但兼容性差；老方案得靠margin，但容易和auto冲突。
- 现代浏览器优先用
gap: 8px（父容器上），它不影响justify-content或margin: auto - 需要兼容IE时，在取消按钮加
margin-right: 8px，确认按钮不加margin——因为margin-left: auto已接管右对齐 - 别给两个按钮都加
margin，否则auto会被覆盖，右对齐失效 -
gap在flex-direction: column时控制垂直间距，别和row混淆
手机上按钮堆叠了，怎么让它们横排但不溢出？
横排失效通常不是flex没生效，而是容器宽度不够或按钮内容过长触发了flex的默认换行行为。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
flex-wrap: nowrap（默认就是，但显式声明更稳妥） - 按钮加
white-space: nowrap防文字换行，再配合overflow: hidden+text-overflow: ellipsis保底线 - 小屏下可改用
flex-direction: column+align-items: stretch，让按钮纵向堆叠并填满宽度 - 别依赖
vw单位定按钮宽度，字体缩放或系统设置会影响实际渲染
