如何根据数字位数调整Flex列宽度以消除多余空白？

嘿，你的问题核心在于当前的Flex子项设置导致了宽度均分，咱们调整一下就能搞定！

你现在给.align-item加了flex: 1 1，这个属性会让每个子项强制均分容器的可用宽度——哪怕内容只有单个数字，也会占用三分之一的空间，这就是多余空白的来源。

修改方案 #

只需要调整.align-item的Flex属性，让它根据自身内容决定宽度，同时保留内容右对齐的需求：

<div class="main-container">
  <div class="align-item">1234</div>
  <div class="align-item">6</div>
  <div class="align-item">6</div>
</div>

.main-container {
  height: 100%;
  display: flex;
  /* 若父容器需要占满上级空间，可保留flex:1 1；否则可移除 */
}

.align-item {
  display: flex;
  justify-content: flex-end;
  margin-left: 0.3rem;
  /* 关键修改：让子项宽度贴合内容，允许收缩但不强制拉伸 */
  flex: 0 1 auto;
  /* 也可以用更直观的写法：flex-shrink: 1; width: fit-content; */
}

效果说明 #

• 替换flex:1 1为flex:0 1 auto后，每个.align-item的宽度会完全贴合内部数字的宽度，单个数字的列就不会有多余空白了。
• justify-content:flex-end依然保留，确保数字靠右对齐，符合表格列的排版需求。

额外提示（多行对齐需求） #

如果你的表格有多行，且希望每一列的宽度在所有行中保持一致（比如第一列统一对齐最长数字的宽度），单纯用Flex需要额外处理（比如给每列单独设类、用JS计算最大宽度）。这种情况下CSS Grid布局会更适合表格类对齐，比如给.main-container换成display: grid并设置grid-template-columns: repeat(3, fit-content)，不过如果你坚持用Flex，上面的修改已经能满足「列宽由内容位数决定」的基础需求啦。

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