Angular中Flexbox宽度异常：Flex表格仅首个表格宽度正常求助

看起来你遇到了两个典型的Flex布局小问题：表格宽度不一致，以及.planned元素没法和名称同行显示。咱们一步步来搞定：

一、修复多表格宽度不一致的问题 #

只有首个表格宽度正常，其余跑偏，大概率是父容器没给统一的布局规则，或者循环生成的子容器没继承一致的宽度分配逻辑。

调整父容器与子表格的Flex属性 #

给.planning-videx和.name-block设置明确的Flex规则，让所有表格保持统一宽度：

.planning-videx {
  display: flex;
  flex-wrap: wrap; /* 按需开启换行，避免溢出 */
  width: 100%; /* 确保容器占满可用宽度 */
  gap: 1rem; /* 可选：给表格间加间距，更美观 */
}

.name-block {
  flex: 1 1 250px; /* 弹性分配宽度，最小250px避免过窄 */
  box-sizing: border-box; /* 确保内边距/边框不干扰宽度计算 */
}

如果表格内部是列结构，再给单元格加弹性宽度，保证每列对齐：

.name-block > .planned {
  flex: 1; /* 让金额单元格平分剩余宽度 */
}

二、让.planned元素和名称同行显示 #

你现在的结构里，.planned是块级div，默认会换行。只要把.name-block改成Flex容器，就能让内部元素在同一行排列：

修改.name-block的布局规则 #

.name-block {
  display: flex;
  justify-content: space-between; /* 名称靠左，金额靠右，按需调整 */
  align-items: center; /* 垂直居中对齐，避免上下错位 */
  padding: 0.5rem; /* 可选：加内边距提升可读性 */
}

如果需要给名称固定宽度（比如防止长名称挤压金额），可以给名称套个span：

<div class="name-block" *ngFor="let valueItem of showVI()">
  <span class="item-name">{{valueItem.name}}</span>
  <div class="planned">{{actualCosts | moneyFormat}}</div>
  <div class="planned">{{plannedCosts | moneyFormat}}</div>
</div>

然后给span加固定宽度：

.item-name {
  flex: 0 0 180px; /* 固定宽度，不收缩不扩展 */
  overflow: hidden;
  text-overflow: ellipsis; /* 长名称显示省略号 */
  white-space: nowrap;
}

额外排查小Tips #

• 检查是否有内联样式或优先级更高的CSS（比如组件的!important规则）覆盖了你的Flex布局
• 确认showVI()返回的数组里，有没有个别项的内容超长，导致表格被撑开变形
• 检查moneyFormat管道是否输出了异常格式的文本，影响宽度计算

如果还是没解决，可以补充完整的CSS代码和showVI()的逻辑，这样能更精准定位问题~

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