使用Flexbox布局数独网格时相邻方块对齐异常问题求助

架构老林

2026-5-14

解决数独网格方块偏移的问题

嘿，我完全懂你遇到的这个网格对齐糟心事！咱们先揪出问题根源，再一步步把它搞定。

问题到底出在哪？

你现在给每个.square用了inline-flex布局，而inline级元素默认的vertical-align属性是baseline——这就导致每个方块会跟着内部文本的基线位置走，而不是咱们想要的统一网格对齐。比如filled里的大数字基线，和note里小数字的基线位置不一样，相邻方块自然就会偏移错位。

另外，你的.board-row只设置了flex-direction: row，但没加display: flex，这让它没法成为真正的flex容器，方块的排列还是会受inline元素的规则干扰。

具体解决方案

咱们分两步修改CSS就能彻底解决：

1. 先把`.board-row`改成真正的flex容器

给.board-row补上display: flex，这样它里面的方块就能按照flex规则整齐排列：

.board-row {
  display: flex; /* 新增这一行 */
  flex-direction: row;
}

2. 调整`.square`的布局属性（二选一即可）

方案A：直接把inline-flex换成flex
既然.board-row已经是flex容器了，子元素直接用flex就行，完全避开inline元素的基线对齐坑：

.square {
  height: 3em;
  width: 3em;
  border: 1px solid black;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  display: flex; /* 替换原来的inline-flex */
}

方案B：保留inline-flex但强制统一对齐
如果不想改display属性，就给.square加上vertical-align: top（或者middle/bottom，选一个统一的值就行），强制所有方块以顶部对齐：
```
.square {
  height: 3em;
  width: 3em;
  border: 1px solid black;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  display: inline-flex;
  vertical-align: top; /* 新增这一行 */
}
```