flex-wrap: wrap-reverse offsets items by the padding/border of the wrong cross-axis edge

Đang mở
  • Có gì không ổn?
#2,071 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
cpp, javascript
Lĩnh vực
computer-graphics, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Report

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

https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgAgMZQHYDMCWBzAvAb3xgGcBTAdVICMARU9MGAGzmIC4EGmyBfHgPgBQCBMAByUACakExOBCakC+AO6ZJcABYcAjAAY9AGgSbSOTXF0Hj6RQA8amAE6kkcTGg4AiJ1BVebe3InMAAHbxUQ0IBaFwA3UicyAIRQsElJTFRsACEoODgoAFsrPiEREXEpGTkFJUI1DW0EfWNTc0sWvT4EAHpy0V6JaSFgXvBoeH4gA

Credit: https://ucsbplse.github.io/

Ngôn ngữ chính
C++
Star
18.9k
Fork
1.6k
Merge trung bình
17 giờ 9 phút
Pull request đã merge (30 ngày)
13

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react/yoga

Tất cả issue của react/yoga

Issue tương tự

Thêm issue về C++

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.