如何让字符数不同的文本左对齐？保留Flex布局的解决方案

核心问题在于：text-align: justify仅作用于单行/多行文本段落，而你的.box内是两个独立块级元素，因此该属性无效；同时justify-content: space-around会根据子元素宽度动态分配间距，导致每组文本无法横向对齐。以下是几种保留Flex布局的解决办法：

方法1：给子元素设置固定宽度 #

为.box内的两个子元素分别设置宽度，确保所有左侧文本和右侧分数的宽度一致，自然实现对齐：

.results {
  display: flex;
  flex-direction: column;
  height: 360px;
  justify-content: space-evenly;
}

.results .box {
  display: flex;
  justify-content: space-between; /* 替换space-around，让元素贴紧两端 */
}

.results .box > div:first-child {
  width: 80px; /* 根据需求调整，保证所有左侧文本宽度统一 */
}

.results .score {
  width: 60px; /* 右侧分数固定宽度 */
  text-align: right; /* 分数右对齐更规整 */
}

方法2：利用Flex的flex属性分配空间 #

让左侧文本容器占据.box的剩余空间，右侧分数固定宽度，确保左侧文本左对齐、右侧分数始终处于最右侧：

.results {
  display: flex;
  flex-direction: column;
  height: 360px;
  justify-content: space-evenly;
}

.results .box {
  display: flex;
  gap: 10px; /* 可选：设置左右元素的最小间距 */
}

.results .box > div:first-child {
  flex: 1; /* 占据.box的剩余空间 */
}

.results .score {
  flex-shrink: 0; /* 防止分数被压缩 */
  text-align: right;
}

方法3：给.box设置统一的固定宽度 #

若希望整体内容居中且对齐，可给.results或.box设置固定宽度，配合margin: 0 auto实现居中，再用justify-content: space-between分配元素位置：

.results {
  display: flex;
  flex-direction: column;
  height: 360px;
  justify-content: space-evenly;
  width: 280px; /* 固定整体宽度 */
  margin: 0 auto;
}

.results .box {
  display: flex;
  justify-content: space-between;
}

.results .score {
  text-align: right;
}

以上方案均保留Flex布局，同时能实现文本的横向对齐效果，可根据实际布局需求选择适配的方法。

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