DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
v3.0.4
yoga/gentest/fixtures/YGGapTest.html
jlmip 07cabca526 Fixed issue with first line element gap handling. (#1408) 
Summary:
If the first element of a line is not contributing (e.g. position absolute), an additional gap will be added to the line, because the first gap element of the line is never identified (wrong start index).
Fix: raise the index of the first line element until we find an element that is contributing to the line.

Pull Request resolved: https://github.com/facebook/yoga/pull/1408

Reviewed By: yungsters

Differential Revision: D49722065

Pulled By: NickGerleman

fbshipit-source-id: 1068cb0b11ae4b04ec8d063e70540cce06181d5a
2023-10-03 06:24:48 -07:00

174 lines
7.9 KiB
HTML
Raw Permalink Blame History

<div id="column_gap_flexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
</div>
<div id="column_gap_inflexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_mixed_flexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="flex: 1;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_child_margins" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
<div style="flex: 1; margin-inline: 2px;"></div>
<div style="flex: 1; margin-inline: 10px;"></div>
<div style="flex: 1; margin-inline: 15px;"></div>
</div>
<div id="column_row_gap_wrapping" style="flex-direction: row; flex-wrap: wrap; width: 80px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_start_index" style="flex-direction: row; flex-wrap: wrap; width: 80px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px; position: absolute"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_justify_flex_start" style="flex-direction: row; justify-content: flex-start; width: 100px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_justify_center" style="flex-direction: row; justify-content: center; width: 100px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_justify_flex_end" style="flex-direction: row; justify-content: flex-end; width: 100px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_justify_space_between" style="flex-direction: row; justify-content: space-between; width: 100px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_justify_space_around" style="flex-direction: row; justify-content: space-around; width: 100px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_justify_space_evenly" style="flex-direction: row; justify-content: space-evenly; width: 100px; height: 100px; column-gap: 10px;">
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="column_gap_wrap_align_flex_start" style="flex-direction: row; flex-wrap: wrap; align-content: flex-start; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_center" style="flex-direction: row; flex-wrap: wrap; align-content: center; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_flex_end" style="flex-direction: row; flex-wrap: wrap; align-content: flex-end; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_space_between" style="flex-direction: row; flex-wrap: wrap; align-content: space-between; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_space_around" style="flex-direction: row; flex-wrap: wrap; align-content: space-around; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
<div style="width: 20px; height: 20px"></div>
</div>
<div id="column_gap_wrap_align_stretch" style="flex-direction: row; flex-wrap: wrap; width: 300px; height: 300px; column-gap: 5px; align-content: stretch;">
<div style="min-width: 60px; flex-grow: 1;"></div>
<div style="min-width: 60px; flex-grow: 1;"></div>
<div style="min-width: 60px; flex-grow: 1;"></div>
<div style="min-width: 60px; flex-grow: 1;"></div>
<div style="min-width: 60px; flex-grow: 1;"></div>
</div>
<div id="column_gap_determines_parent_width" style="flex-direction: row; height: 100px; align-items: 'stretch'; column-gap: 10px;">
<div style="width: 10px;"></div>
<div style="width: 20px;"></div>
<div style="width: 30px;"></div>
</div>
<div id="row_gap_align_items_stretch" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; column-gap: 10px; row-gap: 20px; align-items:stretch; align-content: stretch">
<div style="width: 20px; "></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="row_gap_align_items_end" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; column-gap: 10px; row-gap: 20px; align-items:flex-end;">
<div style="width: 20px; "></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
<div style="width: 20px;"></div>
</div>
<div id="row_gap_column_child_margins" style="flex-direction: column; width: 100px; height: 200px; row-gap: 10px;">
<div style="flex: 1; margin-block: 2px;"></div>
<div style="flex: 1; margin-block: 10px;"></div>
<div style="flex: 1; margin-block: 15px;"></div>
</div>
<div id="row_gap_row_wrap_child_margins" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; row-gap: 10px;">
<div style="width: 60px; margin-block: 2px;"></div>
<div style="width: 60px; margin-block: 10px;"></div>
<div style="width: 60px; margin-block: 15px;"></div>
</div>
<div id="row_gap_determines_parent_height" style="flex-direction: column; width: 100px; align-items: 'stretch'; row-gap: 10px;">
<div style="height: 10px;"></div>
<div style="height: 20px"></div>
<div style="height: 30px"></div>
</div>
Reference in New Issue View Git Blame Copy Permalink