Css 相邻的flexbox div，包装内容在基线而不是网格上对齐

我正在尝试制作一个数独解算器，使用reactjs作为学习reactjs的练习。网格上的每个方块可以包含一个数字（“填充”），也可以包含多达9个“注释”，指示哪些数字可以放在那里

问题是，当一个填充方块位于一个注释方块旁边时，注释方块似乎向下移动，这样注释基线的第一行与填充方块中的数字对齐。我希望这些方块保持相对，忽略它们的内容

我用flexbox来布置东西

我不明白它为什么会这样。我尝试过修补css以使其以不同的方式工作，但我所做的任何尝试都没有产生效果

以下是html的布局方式：

9
1.
2.
3.
4.
5.
6.
7.
8.
1.
...
...
...

和相关css

正文{
字体系列：“helvetica”；
字体大小：16px；
}
.董事会{
显示器：flex；
弯曲方向：立柱；
字体系列：monospace；
}
.董事会席位{
弯曲方向：行；
}
.广场{
高度：3em；
宽度：3em；
边框：1px纯黑；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
显示：内联flex；
}
.广场，满了{
字号：2rem；
背景色：#CC0；
}
.square.注意{
左：3倍；
右侧填充：3px；
}

下面是它的屏幕截图（注释以红色边框-它们包含“”）

链接，因为我无法将其嵌入：

---

我希望黑色边框的正方形在网格中对齐。

您所缺少的是

.square

上的

垂直对齐：top

---

这是因为

display:inlineflex

的工作原理非常类似于

显示：内联块

我相信您需要

。board row

也设置为

显示：flex

，看起来您只设置了

弹性方向

（这是不必要的，因为

row

是默认的

弹性方向

，如果您想保存一行代码）

我找到了一个解决方案：使用列而不是行

我将

.board row

更改为

.board column

，并从

.board row

中删除了

弹性方向：row

。我还将注释重新组织为3行3个，而不是9个包装元素

---

我不认为这是最好的解决方案，只是把它贴在这里给子孙后代

谢谢！这比我的解决方案修复得更好。我想我在某个地方读到过这样的文章：doing

display:flex自动使其所有子元素也成为flexbox元素。不是这样吗？@hoylemd-不是，默认情况下，
display
属性不是继承的（但是，如果需要，可以在子类/选择器中设置
display:inherit
）。这个问题：关于什么是继承财产和什么不是继承财产，有一些很好的链接/答案。我通常会检查具体的属性