Skip to content

fix: Space组件在 justify="center" 布局下最后一个元素有布局错误 #6995

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
+3 −0
Open

fix: Space组件在 justify="center" 布局下最后一个元素有布局错误 #6995

Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
44a75c4
fix: 修复在next.js环境下的报错
Passing-of-A-Dream Jul 29, 2025
3fbe174
refactor(deps): 从 ahooks 的 useIsomorphicLayoutEffect 迁移到 rc-util 的 us…
Passing-of-A-Dream Jul 30, 2025
a71a9dd
Merge branch 'ant-design:master' into master
Passing-of-A-Dream Jul 30, 2025
6a4811f
Merge branch 'ant-design:master' into master
Passing-of-A-Dream Aug 6, 2025
398f75b
Merge branch 'ant-design:master' into master
Passing-of-A-Dream Aug 11, 2025
585573e
Merge branch 'ant-design:master' into master
Passing-of-A-Dream Aug 11, 2025
db7ed93
Merge branch 'ant-design:master' into master
Passing-of-A-Dream Aug 19, 2025
6fe31bf
Merge branch 'ant-design:master' into master
Passing-of-A-Dream Nov 7, 2025
3e79a6a
fix: 修复 Space 组件最后一个子项的边距问题
Passing-of-A-Dream Nov 7, 2025
c8c7812
style: 移除Space组件多余的底部间距样式
Passing-of-A-Dream Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/space/space.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,18 @@
}
> .@{class-prefix-space}-item {
margin-right: var(--gap-horizontal);
&:last-child {
margin-right: 0;
}
}
&.@{class-prefix-space}-wrap {
flex-wrap: wrap;
margin-bottom: calc(var(--gap-vertical) * -1);
> .@{class-prefix-space}-item {
padding-bottom: var(--gap-vertical);
&:last-child {
padding-bottom: 0;
}
Copy link

@gemini-code-assist gemini-code-assist bot Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

这部分修改会为换行布局引入新的 bug。:last-child 选择器只会匹配最后一个子元素。如果启用了 wrap 并且最后一行有多个元素，那么只有最后一个元素（即整组元素的最后一个）的 padding-bottom 会被移除，导致最后一行内的元素垂直方向无法对齐。

实际上，父容器上的 margin-bottom: calc(var(--gap-vertical) * -1) 已经正确地处理了最后一行多余的 padding-bottom，它通过负外边距将整个容器的底部“拉上来”，从而抵消了最后一行的内边距。因此，这里的修改是不必要的，并且是有害的，应当移除。

}
}
Comment on lines 26 to 38
Copy link

@gemini-code-assist gemini-code-assist bot Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

虽然移除最后一个元素的 margin-right 确实解决了 justify-content: center 时的居中问题，但目前通过子元素 margin 和父元素负 margin 来实现间距的整体方案比较复杂，并且容易在边缘场景下出错（比如这次 wrap 模式下的问题）。

一个更现代、更健壮的方案是直接在 flex 容器上使用 gap 属性。这能极大地简化 CSS 代码，并且能更好地处理换行场景。

建议考虑将这部分重构为使用 gap 属性，例如：

.@{class-prefix-space}-horizontal {
  flex-direction: row;
  column-gap: var(--gap-horizontal); // 水平间距
  &.@{class-prefix-space}-wrap {
    flex-wrap: wrap;
    row-gap: var(--gap-vertical); // 换行后的垂直间距
  }
}

这样就可以移除所有在 .@{class-prefix-space}-item 上设置的 margin/padding 规则，以及父容器上的负 margin 规则。考虑到项目中已经使用了 CSS 变量，浏览器的 gap 属性支持度应该不是问题。

}
Expand Down
Loading