Auto cross axis margins are ignored in wrapping containers and baseline rows

Aperta
  • Qualcosa non va?
#2,048 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
56/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
cpp
Ambito
backend

Direzione di ricerca

Start in CalculateLayout.cpp at STEP 8, which the report identifies as overwriting cross-axis positions set by STEP 7 when items have auto margins. Read the related Flexbox steps cited in the issue and compare the reported wrap and baseline cases. Add the described cases as gentest fixtures and verify their cross positions and sizes match the expected values.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Report

Issues and Steps to Reproduce

With flexWrap: 'wrap' or 'wrap-reverse', or in a row where any item uses baseline alignment, cross axis auto margins are ignored.

Take a row 200 wide with children 50x50 and 50x10, the second with marginTop: 'auto', and read the second child's top under each alignItems. For the baseline column there is no wrap and the first child has alignSelf: 'baseline'.

Expected Behavior

Top 40 in every case, as without wrap. Following CSS Flexbox 1 (9.4 steps 8 and 11, 9.6 steps 13 and 14), auto margins take the line's free space, and such an item is not stretched, baseline aligned or aligned by align-self.

Actual Behavior

alignItems no wrap wrap baseline expected
flex-start 40 0 0 40
center 40 20 20 40
flex-end 40 40 40 40
stretch 40 0 0 40

With wrap, marginBottom: 'auto' or both margins auto give the same column (expected 0 and 20), and under stretch a second child with no height gets top 0 and height 50 (expected top 50, height 0). alignItems: 'baseline' with marginBottom: 'auto' gives 40 (expected 0). YGErrataAll and YGErrataNone agree.

The cause is STEP 8 in CalculateLayout.cpp, which runs in both cases. It sets each item's cross position from its alignment with auto margins as 0, overwriting STEP 7's offset. Found in #2045.

Link to Code

The trees above use only the public C API, and I can add them as gentest fixtures with a fix.

Lingua principale
C++
Stelle
18.9k
Fork
1.6k
Merge medio
2g 5h
PR unite (30g)
12

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react/yoga

Tutte le issue di react/yoga

Issue simili

Altre issue su C++

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.