如何让文本换行至图标下方并与图标居中对齐？

方案一：固定垂直排列（始终文本在图标下方） #

如果希望图标始终在上，文本在下且整体居中对齐，只需修改外层Box的flex方向和对齐方式，同时优化文本排版：

<Box
  sx={{
    display: "flex",
    flexDirection: "column", // 改为垂直方向排列
    alignItems: "center", // 图标与文本水平居中对齐
    gap: 2, // 保留图标与文本的间距
    textAlign: "center", // 文本换行后仍保持居中
  }}
>
  <FolderIcon />
  <Typography variant="h6">
    {resourceCategory.name}
  </Typography>
</Box>

调整说明：

• flexDirection: "column"：将默认的水平flex布局改为垂直方向，让文本自然排列在图标下方
• alignItems: "center"：确保图标和文本在水平方向上居中对齐
• textAlign: "center"：当文本长度超出容器宽度时，换行后的文本仍保持居中，提升排版美观度
• 移除Typography上的flex: 1：不再需要文本占满剩余空间，避免不必要的拉伸

方案二：自适应布局（空间充足时一行显示，不足时文本换行至下方） #

如果需要在容器宽度足够时保持图标与文本同行，宽度不足时自动让文本换行到图标下方并居中，可以用flex结合flexBasis实现：

<Box
  sx={{
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "center", // 整体内容在容器中水平居中
    gap: 2,
    textAlign: "center",
  }}
>
  <FolderIcon />
  <Typography 
    variant="h6" 
    sx={{ 
      flexBasis: "calc(100% - 40px)", // 预留图标和间距的宽度（假设图标24px，gap=2对应16px）
      minWidth: 0 // 允许文本收缩以触发换行
    }}
  >
    {resourceCategory.name}
  </Typography>
</Box>

调整说明：

• justifyContent: "center"：让图标和文本整体在容器中水平居中
• flexBasis: "calc(100% - 40px)"：设置文本的基础宽度，当容器宽度小于图标+文本最小宽度时，文本自动换行到下一行
• minWidth: 0：解决flex布局中文本默认不收缩的问题，确保文本能正常触发换行

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