如何在小屏幕设备上让Flex布局中的项目与图标均匀对齐？

看起来你遇到的问题主要来自几个细节上的小疏漏，我帮你梳理下调整方案，应该能快速解决对齐和布局不均的问题：

• 修复SVG缩放的占位问题
  你现在用transform: scale(0.1)缩小SVG，但它的原始宽高还是100x100，这会导致它的布局占位远大于视觉大小，干扰Flex的对齐计算。建议直接修改SVG的实际尺寸，替换掉缩放属性：

  .cta-item-link > svg {
    /* 移除 transform: scale(0.1) */
    width: 20px; /* 设置你需要的视觉大小 */
    height: 20px;
  }
  

  这样SVG的布局占位和视觉大小一致，不会再乱占空间。

• 统一文本对齐方式
  你给文本设置了text-align: left，但父元素是居中对齐的，这会导致文本换行后向左偏移，破坏整体对齐感。把文本对齐改成和父元素一致的居中：

  .cta-item-link > span,
  .cta-item-link > p {
    font-weight: 400;
    font-size: 14px;
    line-height: 110%;
    text-align: center; /* 替换原来的left */
    color: white;
  }
  

• 小屏幕下让项撑满容器宽度
  在移动端媒体查询里，把align-items: center改成stretch，让每个.cta-item撑满容器宽度，同时给.cta-item设置100%宽度，确保布局规整：

  @media (max-width: 480px) {
    .cta-container {
      padding-block: 32px;
      flex-direction: column;
      align-items: stretch; /* 替换center */
      gap: 16px;
    }
    .cta-item {
      width: 100%;
    }
  }
  

  这样每个CTA项在小屏幕上都会占满一行，内部的图标和文本居中对齐，不会出现错位。

• 大屏下让列宽均匀分配
  如果想让大屏上的四个列宽度一致，可以给.cta-item添加flex: 1，让它们平分容器的可用空间：

  .cta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1; /* 新增属性，平分宽度 */
  }
  

  这样不管每个项的内容多少，宽度都会保持一致，整体布局更平衡。

把这些修改加到你的CSS里后，不管是大屏还是小屏，图标和文本都会保持整齐对齐，布局也会更美观统一。

备注：内容来源于stack exchange，提问作者Pointless