fix: Space组件在 justify="center" 布局下最后一个元素有布局错误 #6995
Conversation
dosubot
bot
added
the
size:XS
|
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthrough对 Space 组件的样式做了微调：在水平布局中为最后一个 Changes
Sequence Diagram(s)（本次更改仅为样式修正，无控制流变更，故不提供序列图。） Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 分钟
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @Passing-of-A-Dream, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在优化 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
commit: |
Passing-of-A-Dream
changed the title
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
src/components/space/space.less
Outdated
| &:last-child { | ||
| padding-bottom: 0; | ||
| } |
There was a problem hiding this comment.
这部分修改会为换行布局引入新的 bug。:last-child 选择器只会匹配最后一个子元素。如果启用了 wrap 并且最后一行有多个元素，那么只有最后一个元素（即整组元素的最后一个）的 padding-bottom 会被移除，导致最后一行内的元素垂直方向无法对齐。
实际上，父容器上的 margin-bottom: calc(var(--gap-vertical) * -1) 已经正确地处理了最后一行多余的 padding-bottom，它通过负外边距将整个容器的底部“拉上来”，从而抵消了最后一行的内边距。因此，这里的修改是不必要的，并且是有害的，应当移除。
| > .@{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; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
虽然移除最后一个元素的 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 属性支持度应该不是问题。
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #6995 +/- ##
==========================================
- Coverage 92.96% 92.94% -0.02%
==========================================
Files 337 337
Lines 7359 7359
Branches 1834 1834
==========================================
- Hits 6841 6840 -1
- Misses 510 511 +1
Partials 8 8 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
fix: #6992 修复 Space 组件在 横向布局时最后一个元素有 margin 导致的布局错误
Summary by CodeRabbit
发布说明