本文讲解如何使用 Flexbox 的 justify-content: space-between 实现页脚中左侧显示描述文字、右侧显示社交图标链接的布局效果，解决初学者常见的浮动失效与对齐混乱问题。
本文讲解如何使用 flexbox 的 `justify-content: space-between` 实现页脚中左侧显示描述文字、右侧显示社交图标链接的布局效果，解决初学者常见的浮动失效与对齐混乱问题。
要实现页脚内“文字左对齐、链接右对齐”的经典双区布局，关键在于放弃过时的 float 和不可靠的 text-align 组合，转而采用现代 CSS 布局方案——Flexbox。
你当前的代码中存在两个主要问题：
-
<footer></footer>设置了display: flex但justify-content: center，导致所有子元素居中堆叠； -
.links使用float: right，但在 Flex 容器中浮动属性完全失效（Flex 子项不受float/clear/vertical-align影响）。
✅ 正确做法是：将 <footer></footer> 设为 flex 容器，并使用 justify-content: space-between，使第一个子元素（<p></p>）紧贴左侧，最后一个子元素（.links）紧贴右侧：
footer {
background-color: #444;
padding: 10px;
display: flex;
justify-content: space-between; /* ✅ 关键：左右撑开 */
align-items: center; /* 可选：垂直居中对齐，提升视觉一致性 */
flex-wrap: nowrap; /* 防止小屏下换行（如需响应式可后续调整） */
}同时，优化 HTML 结构以增强语义与可维护性（推荐）：
<footer class="footer">
<p>Any feedback would be much appreciated, you can contact me on the following!</p>
<nav class="footer-links"> <!-- 用 <nav> 替代无意义的 <div> -->
<a href="mailto:you@example.com" aria-label="Email">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="sr-only">Email</span>
</a>
<a href="https://github.com/username" aria-label="GitHub">
<i class="fa fa-github" aria-hidden="true"></i>
<span class="sr-only">GitHub</span>
</a>
<a href="https://linkedin.com/in/username" aria-label="LinkedIn">
<i class="fa fa-linkedin" aria-hidden="true"></i>
<span class="sr-only">LinkedIn</span>
</a>
</nav>
</footer>⚠️ 注意事项：
-
避免重复 ID：原代码中多个
<i></i>使用相同id="icons"—— ID 必须唯一，应改用class="icon"或直接移除； -
图标与链接语义化：为无障碍访问，添加
aria-label和隐藏文本（.sr-only），确保屏幕阅读器正确识别； - 图标库兼容性：若使用 Font Awesome 5+，请确认已引入 SVG 版本或正确配置 CDN；
-
响应式考虑：在移动端，
space-between可能造成间距过大，建议配合媒体查询（如@media (max-width: 768px)）切换为flex-direction: column+align-items: flex-start。
总结：Flexbox 是现代网页布局的基石。掌握 justify-content: space-between 不仅能快速解决页脚对齐问题，更为后续复杂布局打下坚实基础——告别浮动陷阱，拥抱声明式、可预测的弹性布局。
