CSS flex实现3个div并排显示并与上方标题居中对齐

根因定位 #

90%的同类问题都是父容器flex属性缺失、对齐配置错误，或是父子元素宽度/浮动属性冲突导致的，按以下步骤修改即可实现三个功能块水平并排、整体与上方标题居中对齐的效果。

可直接复用的修复代码 #

首先清空.ads容器和其子元素原有冲突的布局属性（包括float、强行设的width:100%、错位的margin值），替换为以下配置：

/* 功能区块父容器 */
.ads {
  /* 核心flex声明，缺了这个所有flex属性都不生效 */
  display: flex;
  /* 桌面端强制子元素不换行，实现水平并排 */
  flex-wrap: nowrap;
  /* 子元素水平居中排列，整体块居中 */
  justify-content: center;
  /* 子元素顶部对齐，避免内容高度不一致时出现垂直错位 */
  align-items: flex-start;
  /* 三个功能块之间的统一间距，比单独给子项加margin更可控，不会出现边距溢出 */
  gap: 48px;
  /* 和上方标题容器保持完全一致的最大宽度，保证左右边距对齐 */
  max-width: 1140px;
  /* 容器本身在页面水平居中 */
  margin: 0 auto;
  /* 小屏幕下左右留安全边距，避免内容贴边 */
  padding: 0 24px;
}

/* 三个功能介绍子div */
.ads .feature-item {
  /* 固定每个功能块的基础宽度，不随意拉伸压缩 */
  flex: 0 0 280px;
  /* 功能块内部内容居中，匹配Spotify设计风格 */
  text-align: center;
}

/* 上方"What's on Spotify?"标题的外层容器，和.ads保持同宽度配置 */
.heading-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 60px 24px 32px;
}
.heading-wrap h2 {
  text-align: center;
  margin: 0;
}

易错点排查清单 #

• 确认没有给.ads的子元素加float属性，浮动属性会直接让flex布局规则失效，有相关声明直接删除
• 确认没有给子功能div设置width: 100%，宽度占满整行时flex无法将三个元素塞入同一行，用flex-basis或者固定宽度控制子项尺寸即可
• 确认justify-content没有错设为flex-start或flex-end，这两个值会让整个功能块组靠页面左右侧偏移，无法和居中的标题对齐
• 不要给.ads设置固定100%宽度再加不对称的左右margin/padding，容易导致容器实际宽度溢出，无法和上方标题对齐

响应式适配补充：在屏幕宽度小于768px的媒体查询中，给.ads加上flex-wrap: wrap，三个功能块会自动切换为竖排，适配移动端浏览。

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