基于Flex实现图标标题对齐 适配移动端与桌面端

要让三个横向排列的图标标题始终在同一水平线，不管副标题多长，只需给现有Flex布局做两处关键调整：

修改后的CSS代码 #

#join3icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch; /* 强制所有子盒子高度和最高的保持一致 */
  gap: var(--size-125);
  padding: 0 var(--size-125);
  flex-wrap: wrap; /* 移动端自动换行，避免挤成一团 */
}

.icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* 元素间的间距，可按需调整 */
  flex: 1; /* 让每个盒子平分父容器的可用宽度 */
  min-width: 120px; /* 移动端最小宽度，防止内容挤压 */
  text-align: center; /* 副标题换行后依然居中 */
}

/* 可选：给标题和副标题加统一样式，视觉更协调 */
.headline3 {
  font-weight: bold;
  font-size: 1.2rem;
}

.sub3iconsText {
  font-size: 0.9rem;
  color: #666;
}

原HTML结构无需改动（仅补充了img的alt属性，增强可访问性） #

<div id="join3icons">
  <div class="icon-box">
    <a href="."><img src="Easier.svg" alt="Einfacher Icon"></a>
    <span class="headline3">Einfacher</span>
    <span class="sub3iconsText">Auftragsverfolgung</span>
  </div>
  <div class="icon-box">
    <a href="."><img src="Faster.svg" alt="Schneller Icon"></a>
    <span class="headline3">Schneller</span>
    <span class="sub3iconsText">Checkout-Vorgang</span>
  </div>
  <div class="icon-box">
    <a href="."><img src="Earn.svg" alt="Besser Icon"></a>
    <span class="headline3">Besser</span>
    <span class="sub3iconsText">Lorem Ipsum is simply dummy text</span>
  </div>
</div>

核心逻辑说明 #

• #join3icons 加 align-items: stretch：这是关键！让所有 .icon-box 的高度自动匹配最高的那个，这样标题的垂直位置自然就对齐了。
• .icon-box 设置 flex: 1：桌面端时三个盒子平分宽度，保持均匀分布；移动端配合 flex-wrap: wrap 自动换行，适配小屏幕。
• min-width: 120px：避免移动端宽度太窄导致文字挤在一起，保证可读性。
• text-align: center：副标题换行后依然居中，视觉上更整齐。

这样改完，不管副标题多长，所有标题都会稳稳地在同一水平线上，桌面和移动端都能完美适配。

内容的提问来源于stack exchange，提问作者Rony Cohen