关于#红圈#的问题，如何解决？(关键词-左对齐)

.mainBody {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
}

.mainCard {
  width: 180px;
  margin: 10px 0 0 5px;
}

怎么让红圈的行跟上面一样左对齐

align-items: center;
去掉或者修改为left

参考GPT和自己的思路：

要让红圈的行跟上面一样左对齐，可以在.mainCard的样式中加上vertical-align: top;属性，例如：

.mainCard {
  width: 180px;
  margin: 10px 0 0 5px;
  vertical-align: top;
}

这个属性可以让元素的顶部对齐，这样红圈所在的行就跟上面一样左对齐了。