如何在较小的设备上将 Flex 项目与图标统一对齐？

Question

我正在使用 Flexbox 进行响应式网页设计，并遇到了 Flex 项目（尤其是图标）在较小设备上对齐的问题。该布局包括带有图标和文本的多列，但在较小的屏幕上，图标无法正确对齐，导致整体布局看起来不均匀，坦率地说，很难看。我希望列的宽度相等，并且间距/边距保持一致，但不同的图标位置会破坏这一点。

我的html：

<section class="cta">
    <div class="container mx-auto">
        <div class="cta-container d-flex">
            <div class="cta-item">
                <a href="tel:your-phone-number" class="cta-item-link d-flex jcc aic">
                 
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
                    <span class="cta-text">Your Phone Number</span>
                </a>
            </div>

            <!-- CTA Item for Address -->
            <div class="cta-item">
                <a href="your-map-link" class="cta-item-link d-flex jcc aic">

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
                    <span class="cta-text">Your Address</span>
                </a>
            </div>

            <div class="cta-item">
                <a href="mailto:your-email" class="cta-item-link d-flex jcc aic">
                  
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />  
</svg> 
                    <span class="cta-text">Your Email</span>
                </a>
            </div>
            <div class="cta-item">
                <a href="#" class="cta-item-link d-flex jcc aic">

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
                    <span class="cta-text">Your Working Hours</span>
                </a>
            </div>
        </div>
    </div>
</section>

我的CSS：

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

$cta: ".cta";

#{$cta} {
    background-color: green;
    padding-inline: 24px;
    
    &-container {
        padding-block: 16px;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        display: flex;
      
        @media (max-width: 480px) {
            padding-block: 32px;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }
    }

    &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        &-link {
          & > svg {
            transform: scale(0.1);
          }
            gap: 10px;
            color: white; 
            flex-basis: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            // @media (max-width: 768px) {
            //     width: 40%;
            // }
            &>span,
            p {
                font-weight: 400;
                font-size: 14px;
                line-height: 110%;
                text-align: left;
                color: white; 
            }
        }
    }
}

我的代码笔：

https://codepen.io/korneliuszburian/pen/yLZvwwx

在较大的屏幕上，布局看起来不错，但在较小的设备（例如手机）上，图标对齐不均匀，使整体外观不平衡。 cta__i 元素及其图标被定位为居中，这导致了它们的重叠。

我尝试设置 .cta-item 的宽度并使用align-items：基线，但项目仍然关闭。图标和文本未按预期排列，并且这种错位在较小的屏幕上尤其明显。

如何确保图标正确对齐并且弹性项目在所有设备尺寸上保持统一且美观的外观？任何建议或 CSS 修复将不胜感激！

Answer 1

在您的

.cta-item

类中，您不需要其他样式，但

width: 100%;

和其他类 .cta-item-link 将是这样的：

.cta-item-link {
    color: white;
    display: flex;
    align-items: center;
    justify-content: unset;
}