您可以通过使用grid而不是flexbox来实现这一点

#join3icons {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

删除图标框css类和相应的div，所有内容都将按网格排序
根据您的需要，您可以将grid-template-rows行中的1fr替换为auto，这样每行都有自己的高度。

你需要给予出照片的确切大小，因为左边的照片比其他照片大，这应该可以解决你的问题。
CSS：

img{
    height: 100px;
}

因为标题底部的文本是单行的，而其余文本是两行的，Flex会降低标题以补偿左侧的距离，因此它无法容纳在一行中。您可以使用网格（更容易处理）或一个大小为底部文本指定标题，例如：

.sub3iconsText {
    height: 40px;
}