flex-wrap: wrap-reverse offsets items by the padding/border of the wrong cross-axis edge
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 72/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- cpp, javascript
调研方向
Start in CalculateLayout.cpp, where the issue says cross-axis lines are positioned from leading padding and border and wrap-reverse mirrors items across the border box. Trace the wrap-reverse positioning for row and column layouts, then compare computed child positions with the reproduction and the CSS Flexbox expectation. Done means asymmetric cross-axis padding and borders place items from the correct edge in both directions.
由索引模型根据 Issue 内容生成。
描述
Report
- I have searched existing issues and this is not a duplicate
Issues and Steps to Reproduce
With flexWrap: Wrap.WrapReverse, the container's cross-axis padding and border are applied on the wrong side. Items are offset by the cross-start padding (top in a row) instead of the cross-end padding (bottom). When the two edges differ, every item is shifted by the difference.
import Yoga, {FlexDirection, Wrap, Edge} from 'yoga-layout';
const root = Yoga.Node.create();
root.setFlexDirection(FlexDirection.Row);
root.setFlexWrap(Wrap.WrapReverse);
root.setWidth(100);
root.setHeight(100);
root.setPadding(Edge.Bottom, 10);
const child = Yoga.Node.create();
child.setWidth(10);
child.setHeight(10);
root.insertChild(child, 0);
root.calculateLayout(undefined, undefined);
console.log(child.getComputedLayout().top);
Run with node repro.mjs on yoga-layout 3.2.1 (also reproduces on main at 41118bd via the C API with YGErrataNone, YGErrataClassic, and YGErrataAll).
Expected Behavior
child.getComputedLayout().top should be 80 (100 - 10 paddingBottom - 10 height), matching browsers and CSS Flexbox flex-wrap: wrap-reverse.
Actual Behavior
node repro.mjs prints 90 (the child sits flush against the bottom edge, ignoring paddingBottom: 10). Conversely, setting root.setPadding(Edge.Top, 10) instead of Edge.Bottom gives top: 80 instead of 90. The same swap happens with cross-axis borders and with column containers that have asymmetric left/right padding or border.
In CalculateLayout.cpp, lines are laid out starting from leadingPaddingAndBorderCross, and the wrap-reverse pass mirrors each item with measuredDimension(cross) - position - size across the full border box rather than adjusting for computeFlexStartPaddingAndBorder(cross) - computeFlexEndPaddingAndBorder(cross).
Link to Code
Credit: https://ucsbplse.github.io/
- 主要语言
- C++
- 星标
- 18.9k
- 派生
- 1.6k
- 平均合并
- 17 小时 9 分钟
- 30 天内合并 PR
- 13
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
react/yoga 的其他 Issue
-
Under FMA contraction, an item that shrinks exactly to its min-width is laid out at its flex basis未关闭
难度 4/5 3-5 天 新手友好度 58/100
维护者通常 1 天内回复
-
难度 3/5 1-2 天 新手友好度 72/100
维护者通常 1 天内回复
-
A child pinned with bottom: 0 can end a pixel above its parent's bottom after pixel rounding可能已有人在做 @Pduhard 于 5 天前认领。 未关闭
难度 4/5 3-5 天 新手友好度 25/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 25/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 35/100
维护者通常 1 天内回复
相似的 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 76/100
维护者通常 3 天内回复
-
backlog
难度 2/5 1-3 小时 新手友好度 78/100
EchoTools/nevr-runtime#2385 ·
维护者通常 1 天内回复
-
type:bug
难度 2/5 1-3 小时 新手友好度 65/100
tensorflow/tflite-micro#3995 ·
维护者通常 1 天内回复
-
CPU update 1.31x未关闭speed-report
难度 1/5 1 小时以内 新手友好度 75/100
mw00/project-maya#961 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100