Angular 11 Material表格Flex布局操作图标1/2个时居中对齐去多余间隙问题

问题原因 #

你使用的justify-content: space-between属性会将flex容器的剩余空白空间平均分配到所有子元素的间隙中，当子元素数量少于最大值时，就会出现不符合预期的大间隙。

解决方案 #

修改.align-user-action的CSS代码如下：

.align-user-action {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    gap: 8px; /* 可根据设计需求调整间距数值 */
    cursor: pointer;
}

方案说明 #

• justify-content: center保证所有图标整体在单元格内居中，单个图标时自然和操作列表头居中对齐
• gap属性固定控制图标之间的间距，不受图标数量影响，2个图标时仅保留你设置的合理间距，完全匹配需求。

如果需要兼容不支持gap属性的旧版本浏览器，可以用margin方案代替：

.align-user-action {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
}
/* 给所有操作图标添加左右边距，首、尾图标分别去掉左、右边距避免额外留白 */
.align-user-action > * {
    margin: 0 4px;
}
.align-user-action > *:first-child {
    margin-left: 0;
}
.align-user-action > *:last-child {
    margin-right: 0;
}

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