如何用flex实现表格单元格右对齐且内容居中，消除标签与图形间多余间距

问题原因 #

你遇到的多余间距问题核心是两个配置冲突：.label设置了text-align: right，同时flex布局下.label的盒子宽度大于实际文本宽度，文本右对齐后会在label左侧和红色方块之间留出空白；而你设置flex:0时label没有收缩空间，就会出现异常折行。

修复方案 #

只需要调整少量CSS即可实现需求：

/* 仅列出需要修改/新增的样式，其余原有样式保留 */
.label {
  text-align: left; /* 从right改为left，让文本紧贴左侧方块 */
  background-color: yellow;
  flex: 0 1 auto; /* 新增：不主动填充多余空间，宽度不足时可正常收缩折行 */
  margin-left: 4px; /* 如果需要方块和文本之间留一点点小间距可以加，不需要就删掉这行 */
}

/* 原有错误的vertical-align值修正 */
table tr th:nth-child(1), table tr td:nth-child(1) {
  min-width: 140px;
  text-align: left;
  padding: 5px;
  vertical-align: middle; /* 从center改为标准属性值middle */
}

如果你的预期是红色方块显示在文本右侧，只需要调整HTML里两个元素的顺序即可：

<div class="container">
  <span class="label">Numeric cell w  with realy long long name</span>
  <span class="square"></span>
</div>

调整顺序后记得把.label的margin-left改为margin-right即可。

修改后即可实现需求：第二个表头整体右对齐，label与红色方块垂直居中、无多余间距，长文本可正常换行显示为2-3行。

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