如何使用CSS实现header标签内三个span文本分别左中右对齐

问题原因 #

默认状态下span是行内元素，会按照文档流从左到右依次排列，父容器header没有配置布局规则时，无法自动分配容器宽度让三个子元素分别对齐到左、中、右位置。

最优实现（Flex布局，无需修改HTML结构） #

直接给header容器添加Flex布局属性即可，修改后的完整CSS代码如下：

body {
    background-color: pink;
}

header {
    background-color: green;
    width: 600px;
    height: 40px;
    margin: auto;
    /* 新增Flex布局相关属性 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

span {
    background-color: yellow;
}

属性说明 #

• display: flex：将header设置为弹性布局容器，内部的三个span会自动成为弹性子项
• justify-content: space-between：让弹性子项沿水平方向均匀分布，第一个子项靠左对齐、最后一个子项靠右对齐、中间子项自动居中，完全匹配需求
• align-items: center：让三个span在header的垂直方向居中对齐，适配40px的容器高度，避免文本贴在容器顶部

该方案代码简洁、兼容性覆盖98%以上的现代浏览器，是当前前端实现这类分散对齐布局的首选方案。

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