多个按钮垂直堆叠最直接的方法是设display: block，使每个按钮独占一行；若需响应式切换行列布局，则应使用display: flex配合flex-direction控制方向。
多个按钮垂直堆叠用 display: block 最直接
想让按钮从上到下排成一列，最省事的办法就是让每个 button 当成块级元素处理。默认情况下 button 是内联元素，所以会挤在同一行；加一句 display: block 就能强制换行。
常见错误是只设了 width: 100% 却忘了 display: block，结果按钮看着宽、实际还是并排——因为内联元素无视 width。
-
button { display: block; margin: 8px auto; width: 200px; }：每个按钮独占一行，水平居中，上下留空 - 如果父容器有 padding，
margin: 8px 0比margin: 8px auto更可控，避免意外撑开容器 - 别用
float: left做垂直排列，容易触发清除浮动问题，且语义错乱
Flexbox 实现灵活列/行切换只需改一个属性
当按钮数量可能变化、或需要响应式切换（小屏竖排、大屏横排），display: flex 是更健壮的选择。关键不是写多少 CSS，而是理解 flex-direction 的作用域。
错误做法是给每个 button 单独设 flex，真正起作用的是父容器的 display: flex 和方向声明。
立即学习“前端免费学习笔记（深入）”；
- 竖排：
.btn-group { display: flex; flex-direction: column; gap: 12px; } - 横排：
.btn-group { display: flex; flex-direction: row; gap: 8px; } -
gap比margin更安全——它不会在首尾多出空白，也不受 collapse 影响 - 避免同时用
align-items: center和text-align: center，前者管子元素位置，后者管内联内容，混用易导致文字偏移
Grid 布局适合固定行列结构，比如 3×3 按钮阵列
如果你明确知道按钮要排成几行几列（例如首页功能入口、数字键盘），display: grid 比 Flexbox 更精准，不用算 margin 或 justify 逻辑。
典型陷阱是忘记设置 grid-template-columns，只写 grid-column 却没定义列轨道，结果所有按钮叠在左上角。
- 3 列等宽：
.grid-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } - 指定某按钮跨两列：
button:nth-child(1) { grid-column: span 2; } - 用
auto-fit+minmax()实现“尽可能多列、但每列不窄于 120px”：grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) - 注意：Grid 的
gap对行列都生效，而 Flexbox 的gap只对主轴方向有效
绝对定位按钮慎用，除非你真需要脱离文档流
用 position: absolute 放按钮，本质是放弃浏览器默认布局逻辑，转为像素级手动控制。这在固定尺寸弹窗或悬浮操作按钮里可行，但用于常规页面按钮列表，几乎必然带来维护噩梦。
最常被忽略的前提：父容器必须有 position: relative（或非 static），否则 top/left 会相对于视口定位，滚动时按钮就飘走了。
- 仅适用于场景：右上角关闭按钮、表单右下角提交/取消组合、地图上的工具图标
- 别给多个按钮都设
position: absolute再靠top值硬调间距，一旦按钮文字变长或换行，位置全乱 - 如果只是想右对齐，用
text-align: right或justify-content: flex-end更可靠
