Flex盒子无法相互对齐求助：如何实现Flex容器对齐？

问题根源 #

你的HTML结构嵌套错误——第一个.row容器里又套了多层.row，导致三个.services-col不在同一个Flex父容器下，完全破坏了横向排列的逻辑，这就是对齐失效的核心原因。

修正步骤 #

1. 修复HTML结构 #

把多余的嵌套.row全部移除，让三个服务卡片直接放在同一个.row容器内：

<section class="services">
  <h1>Services We Offer</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

  <div class="row">
    <div class="services-col">
      <h3>Concrete Machinery Installation</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
    </div>

    <div class="services-col">
      <h3>Electrical and Automation</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
    </div>

    <div class="services-col">
      <h3>Heavy Equipments</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat minus aliquid incidunt suscipit, dolores qui magnam a obcaecati voluptates nesciunt!</p>
    </div>
  </div>
</section>

2. 优化Flex垂直对齐（可选） #

如果后续卡片内容高度不一致，想让它们始终保持垂直方向的对齐，可以给.row添加align-items属性：

.row {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 让子元素高度自适应，默认值，显式声明更清晰 */
}

• 要顶部对齐就把align-items设为flex-start
• 要底部对齐就设为flex-end

关键注意事项 #

• 你的.services-col设置flex-basis: 31%，三个总和93%，配合justify-content: space-between的间距，不会超出容器宽度，这个配置合理
• box-sizing: border-box已经正确配置，避免padding撑大盒子宽度，无需修改
• 检查是否有其他额外的margin/padding干扰Flex容器布局

内容的提问来源于stack exchange，提问作者Rafhael Gaite