如何实现文本在div元素的左上角对齐？

问题出在你对flex属性的使用逻辑上：

• 在.cell这个flex容器中，你需要设置align-items: flex-start来让内部的文本（flex子项）垂直靠上对齐，而非使用align-self——align-self是给flex子项用的属性，作用是覆盖父容器的align-items设置，不能直接用在容器本身上。
• 另外，justify-content: left可以替换成更标准的justify-content: flex-start，效果一致且更符合flex布局的规范。

修正后的.cell样式代码如下：

.cell {
   display: flex;
   justify-content: flex-start; /* 水平靠左对齐，替代left */
   align-items: flex-start; /* 垂直靠上对齐 */

   background-color: grey;
   height: 50px;
   width: 50px;
   border-style: solid;
   border-width: 2px;
   border-color: black;
}

额外提示：你的.grid中grid-template-columns: repeat(10, 45px)定义的列宽是45px，但.cell的宽度是50px，这会导致网格布局的列宽和单元格宽度不匹配，可能出现溢出或布局错乱，建议把grid-template-columns改成repeat(10, 50px)，保持和单元格宽度一致。

内容的提问来源于stack exchange，提问作者redfox