2022-11-16 14:02:31 -08:00
|
|
|
<div id="column_gap_flexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px; row-gap: 20px;">
|
2022-10-13 08:18:49 -07:00
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-11-16 14:02:31 -08:00
|
|
|
<div id="column_gap_inflexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
|
2022-10-13 08:18:49 -07:00
|
|
|
<div style="width: 20px;"></div>
|
|
|
|
|
<div style="width: 20px;"></div>
|
|
|
|
|
<div style="width: 20px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-11-16 14:02:31 -08:00
|
|
|
<div id="column_gap_mixed_flexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
|
2022-10-13 08:18:49 -07:00
|
|
|
<div style="width: 20px;"></div>
|
|
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
|
<div style="width: 20px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2022-11-16 14:02:31 -08:00
|
|
|
<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>
|
|
|
|
|
|
2022-10-13 08:18:49 -07:00
|
|
|
<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>
|
|
|
|
|
|
2023-10-03 06:24:48 -07:00
|
|
|
<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>
|
|
|
|
|
|
2022-10-13 08:18:49 -07:00
|
|
|
<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>
|
|
|
|
|
|
Incorporate gap space into main axis overflow flag (#1173)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1173
In https://github.com/facebook/react-native/issues/35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap.
In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization?
If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead.
`flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`.
We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap.
Changelog:
[General][Fixed] - Fix incorrect height when gap causes main axis to overflow and cross-axis is stretched
Reviewed By: yungsters
Differential Revision: D41311424
fbshipit-source-id: bd0c3b5aac478a56878703b6da84fc3993cc14da
2022-11-15 19:51:48 -08:00
|
|
|
<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>
|
|
|
|
|
|
2022-12-15 16:30:37 -08:00
|
|
|
<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>
|
|
|
|
|
|
2022-10-13 08:18:49 -07:00
|
|
|
<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>
|
2022-11-16 14:02:31 -08:00
|
|
|
|
|
|
|
|
<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>
|
2022-12-15 16:30:37 -08:00
|
|
|
|
|
|
|
|
<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>
|
2024-04-15 16:44:16 -07:00
|
|
|
|
|
|
|
|
<div id="row_gap_percent_wrapping" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="row_gap_percent_determines_parent_height" style="flex-direction: row; width: 300px; gap: 10%; flex-wrap: wrap;">
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="row_gap_percent_wrapping_with_both_content_padding_and_item_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
|
|
|
|
|
<div style="width: 100px; height: 100px; padding: 10px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px; padding: 10px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px; padding: 10px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px; padding: 10px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px; padding: 10px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="row_gap_percent_wrapping_with_both_content_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="row_gap_percent_wrapping_with_content_margin" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; gap: 10%; flex-wrap: wrap;">
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="row_gap_percent_wrapping_with_content_margin_and_padding" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; padding: 10px; gap: 10%; flex-wrap: wrap;">
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="row_gap_percent_wrapping_with_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
|
|
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="row_gap_percent_wrapping_with_mixed_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
|
|
|
|
|
<div style="width: 10px;"></div>
|
|
|
|
|
<div style="flex: 1;"></div>
|
|
|
|
|
<div style="width: 10%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- TODO: Existing bug that Yoga is not inline with Chromium for calculation with min-width -->
|
|
|
|
|
<div id="row_gap_percent_wrapping_with_min_width" data-disabled="true" style="flex-direction: row; min-width: 300px; gap: 10%; flex-wrap: wrap;">
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
|
|
|
</div>
|