如何让容器内元素均匀分布且首尾对齐容器边缘？

你只需要调整.subtitles label的样式，去掉导致元素被拉伸和居中的属性，同时保留justify-content: space-between来实现均匀分布并让左右元素贴边：

1. 移除.subtitles label中的flex-grow: 1和text-align: center——这两个属性会强制每个label占据同等宽度并居中内容，直接抵消了justify-content: space-between的效果。
2. 保持.subtitles的width: 100%，确保它的宽度和父容器（.header-section）一致，这样左右元素能准确对齐容器边缘。

修改后的完整代码：

CSS #

.header-section {
  border: 1px solid red;
  display: flex;
  width: fit-content;
  height: fit-content;
  flex-direction: column;
}

.title {
  font-size: 75pt;
  margin: 0;
}

.subtitles {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.subtitles label {
  width: fit-content; /* 保留该属性，让label宽度适配自身内容 */
}

HTML #

<div class="header-section">
  <h1 class="title">Title goes here</h1>
  <div class="subtitles">
    <label><- this should be left</label>
    <label>This is fine</label>
    <label>this should be right -></label>
  </div>
</div>

修改后，第一个label会左对齐.subtitles的左边缘，最后一个label右对齐右边缘，中间的label会自动处于两者之间的居中位置，完全符合需求。

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