如何使用 Flexbox 实现三元素（左、中、右）水平对齐布局-html教程-PHP中文网

本文介绍一种现代、简洁且可靠的 CSS 方案，利用 Flexbox 的 justify-content: space-between 配合 display: flex，在单行容器内精准控制三个子元素分别左对齐、居中、右对齐，彻底替代过时的 float 方法。

本文介绍一种现代、简洁且可靠的 css 方案，利用 flexbox 的 `justify-content: space-between` 配合 `display: flex`，在单行容器内精准控制三个子元素分别左对齐、居中、右对齐，彻底替代过时的 `float` 方法。

在构建电商网站顶部服务栏（如“客户服务｜免费配送｜附近门店”）时，常需将三个不等宽文本块严格排布为：左对齐、居中、右对齐——且保持在同一视觉行内。传统使用 float: left/right 的方式易引发清除浮动、文档流破坏及响应式适配困难等问题；而纯 text-align 或 inline-block + text-align:center 也无法同时满足三者独立定位需求。

推荐方案：Flexbox 布局（语义清晰、兼容性好、无需 hack）

只需将包裹的

元素设为弹性容器，并启用主轴空间均分：

.barraServizioClienti {
  width: 100%;
  height: 27px;
  padding: 4px 15px;
  background-color: #121212;
}

/* 关键：让 p 成为 flex 容器，子元素自动沿主轴（水平）等距分布 */
p {
  display: flex;
  justify-content: space-between; /* 左-中-右自动分配剩余空间 */
  margin: 0; /* 移除默认段落外边距，确保高度精确 */
  height: 100%; /* 继承父容器高度，保障垂直居中基础 */
  align-items: center; /* 垂直居中所有子元素（含文字和链接） */
}

/* 文本样式统一定义 */
#servizioClienti a,
#spedizioniGratis,
#trovaci a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
}

HTML 结构保持简洁语义化，无需额外 wrapper 或 class：

<div class="barraServizioClienti">
  <p>
    <span id="servizioClienti"><a href="home.html">Servizio Clienti</a></span>
    <span id="spedizioniGratis">Spedizioni e resi gratuiti</span>
    <span id="trovaci"><a href="home.html">Trova il negozio più vicino</a></span>
  </p>
</div>

✅ 优势说明：

space-between 自动将首项推至最左、末项推至最右、中间项居中（无论内容宽度是否相等）；
align-items: center 确保所有在 27px 高度内垂直居中，避免基线对齐偏差；
完全脱离 float，无清除需求，DOM 流自然，利于可访问性与 SEO；
支持响应式扩展（如配合 flex-wrap: wrap 或媒体查询做移动端堆叠）。

⚠️ 注意事项：

避免给设置 width 或 flex 相关属性（除非需特殊缩放），默认 flex: 0 0 auto 即可；
若中间文本过长导致溢出，建议添加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 控制；
旧版浏览器（如 IE9 及以下）不支持 Flexbox，若需兼容，应降级为 table-cell 或 JavaScript 补丁方案（但当前主流项目已无需考虑）。

掌握这一模式后，类似导航栏、页脚信息栏、卡片标题区等「三段式」布局均可复用同一套逻辑，高效、稳健、易于维护。