DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
c12e732fab688fce2e74bcc8c04f232e0af4e7e7
yoga/gentest/fixtures/YGAlignContentTest.html
phuccvx12 77c9987012 Fix: Correct Layout Behavior for Combined align-content and align-items (#1742) 
Summary:
X-link: https://github.com/facebook/react-native/pull/47732

This pull request addresses the issue where combining align-content and align-items properties resulted in incorrect layout behavior in Yoga version 3.1.0, as reported in [Issue https://github.com/facebook/yoga/issues/1739](https://github.com/facebook/yoga/issues/1739).

# Changes Made:

Alignment Logic Update: Modified the alignment calculations to ensure that the combination of align-content and align-items properties produces the expected layout, consistent with CSS Flexbox standards and previous Yoga versions.

Test Cases Added: Introduced new test cases to cover scenarios involving various combinations of align-content and align-items properties to prevent future regressions.

# Testing:

All existing tests pass successfully.

New test cases confirm that the layout behaves as expected when align-content and align-items are used together.

# Impact:

This fix ensures that layouts using both align-content and align-items properties render correctly, aligning with the behavior observed in Yoga version 1.19.0 and standard web browsers.

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

Reviewed By: joevilches

Differential Revision: D65953882

Pulled By: zeyap

fbshipit-source-id: 7e12a21b1d442b35c3f3536cad32dc4b82130d15
2024-11-20 19:59:42 -08:00

480 lines
25 KiB
HTML
Raw Blame History

<!-- ALIGN CONTENT: FLEX-START -->
<div id="align_content_flex_start_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-start;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_flex_start_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_flex_start_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_flex_start_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_flex_start_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_flex_start_without_height_on_children" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
<div style="width: 50px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_flex_start_with_flex" style="width: 100px; height: 120px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
<div style="width: 50px; flex: 1; flex-shrink: 0;"></div>
<div style="width: 50px; flex: 1; height: 10px; flex-shrink: 0;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px; flex: 1;"></div>
<div style="width: 50px;"></div>
</div>
<!-- ALIGN CONTENT: FLEX-END -->
<div id="align_content_flex_end_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: flex-end;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_flex_end_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_flex_end_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_flex_end_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_flex_end_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<!-- ALIGN CONTENT: CENTER -->
<div id="align_content_center_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: center;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_center_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_center_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: center;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_center_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_center_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<!-- ALIGN CONTENT: SPACE-BETWEEN -->
<div id="align_content_space_between_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-between;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_space_between_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_between_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_space_between_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_space_between_wrapped_negative_space_row_reverse" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_space_between_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<!-- ALIGN CONTENT: SPACE-AROUND -->
<div id="align_content_space_around_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-around;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_space_around_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_around_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_space_around_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_space_around_wrapped_negative_space_row_reverse" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_space_around_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<!-- ALIGN CONTENT: SPACE-EVENLY -->
<div id="align_content_space_evenly_nowrap" style="width: 140px; height: 120px; flex-direction: row; align-content: space-evenly;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_space_evenly_wrap" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<!-- This tests the case where `flex-wrap: wrap` but the content does not actually wrap -->
<div id="align_content_space_evenly_wrap_singleline" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-evenly;">
<div style="width: 50px; height: 10px;"></div>
<div style="width: 50px; height: 10px;"></div>
</div>
<div id="align_content_space_evenly_wrapped_negative_space" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<div id="align_content_space_evenly_wrapped_negative_space_gap" style="display: flex; flex-direction: column; width: 320px; height: 320px; border-width: 60px;">
<div style="display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; justify-content: center; height: 10px; gap: 10px;">
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
<div style="width: 80%; height: 20px; flex-shrink: 0;"></div>
</div>
</div>
<!-- ALIGN CONTENT: STRETCH -->
<div id="align_content_stretch" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_children" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;">
<div style="flex: 1;"></div>
</div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_flex" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px; flex: 1;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px; flex: 1;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_flex_no_shrink" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px; flex: 1;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px; flex: 1; flex-shrink: 0;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_margin" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px; margin: 10px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px; margin: 10px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_padding" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px; padding: 10px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px; padding: 10px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_single_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_fixed_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px; height: 60px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_max_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px; max-height: 20px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_row_with_min_height" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: stretch;">
<div style="width: 50px;"></div>
<div style="width: 50px; min-height: 80px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="align_content_stretch_column" style="width: 100px; height: 150px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
<div style="height: 50px;">
<div style="flex: 1;"></div>
</div>
<div style="height: 50px; flex: 1;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
<div style="height: 50px;"></div>
</div>
<div id="align_content_stretch_is_not_overriding_align_items" style="align-content:stretch;">
<div style="width:100px; height: 100px; align-items: center; flex-direction: row; align-content:stretch;">
<div style="height: 10px; width: 10px; align-content:stretch;"></div>
</div>
</div>
<div id="align_content_stretch_with_min_cross_axis" style="width: 500px; min-height: 500px; flex-direction: row; flex-wrap: wrap; align-content: stretch;">
<div style="width: 400px; height: 200px;"></div>
<div style="width: 400px; height: 200px;"></div>
</div>
<div id="align_content_stretch_with_max_cross_axis" style="width: 500px; max-height: 500px; flex-direction: row; flex-wrap: wrap; align-content: stretch;">
<div style="width: 400px; height: 200px;"></div>
<div style="width: 400px; height: 200px;"></div>
</div>
<div id="align_content_stretch_with_max_cross_axis_and_border_padding" style="width: 500px; max-height: 500px; flex-direction: row; flex-wrap: wrap; align-content: stretch; border: solid black 5px; padding: 2px">
<div style="width: 400px; height: 200px;"></div>
<div style="width: 400px; height: 200px;"></div>
</div>
<div id="align_content_space_evenly_with_min_cross_axis" style="width: 500px; min-height: 500px; flex-direction: row; flex-wrap: wrap; align-content: space-evenly;">
<div style="width: 400px; height: 200px;"></div>
<div style="width: 400px; height: 200px;"></div>
</div>
<div id="align_content_space_evenly_with_max_cross_axis" style="width: 500px; max-height: 500px; flex-direction: row; flex-wrap: wrap; align-content: space-evenly;">
<div style="width: 400px; height: 200px;"></div>
<div style="width: 400px; height: 200px;"></div>
</div>
<div id="align_content_space_evenly_with_max_cross_axis_violated" style="width: 500px; max-height: 300px; flex-direction: row; flex-wrap: wrap; align-content: space-evenly;">
<div style="width: 400px; height: 200px;"></div>
<div style="width: 400px; height: 200px;"></div>
</div>
<div id="align_content_space_evenly_with_max_cross_axis_violated_padding_and_border" style="width: 500px; max-height: 300px; flex-direction: row; flex-wrap: wrap; align-content: space-evenly; border: solid black 5px; padding: 2px">
<div style="width: 400px; height: 200px;"></div>
<div style="width: 400px; height: 200px;"></div>
</div>
<div id="align_content_space_around_and_align_items_flex_end_with_flex_wrap" style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: space-around;align-items: flex-end;">
<div style="height: 50px; width: 150px;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>
<div id="align_content_space_around_and_align_items_center_with_flex_wrap" style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: space-around;align-items: center;">
<div style="height: 50px; width: 150px;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>
<div id="align_content_space_around_and_align_items_flex_start_with_flex_wrap" style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: space-around;align-items: flex-start;">
<div style="height: 50px; width: 150px;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>
<div id="align_content_flex_start_stretch_doesnt_influence_line_box_dim" style="width: 400px; flex-direction: row; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<div style="height: 100px; width: 100px; margin-right: 20px;"></div>
<div style="flex-direction: row; flex-wrap: wrap; flex-shrink: 1; flex-grow: 1; align-content: flex-start;">
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
</div>
<div style="height: 50px; width: 50px; margin-left: 20px;"></div>
</div>
<div id="align_content_stretch_stretch_does_influence_line_box_dim" style="width: 400px; flex-direction: row; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<div style="height: 100px; width: 100px; margin-right: 20px;"></div>
<div style="flex-direction: row; flex-wrap: wrap; flex-shrink: 1; flex-grow: 1; align-content: stretch;">
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
</div>
<div style="height: 50px; width: 50px; margin-left: 20px;"></div>
</div>
<div id="align_content_space_evenly_stretch_does_influence_line_box_dim" style="width: 400px; flex-direction: row; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px;">
<div style="height: 100px; width: 100px; margin-right: 20px;"></div>
<div style="flex-direction: row; flex-wrap: wrap; flex-shrink: 1; flex-grow: 1; align-content: stretch;">
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
<div style="height: 30px; width: 30px; margin-right: 20px;"></div>
</div>
<div style="height: 50px; width: 50px; margin-left: 20px;"></div>
</div>
<div id="align_content_stretch_and_align_items_flex_end_with_flex_wrap"
style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: stretch;align-items: flex-end;">
<div style="height: 50px; width: 150px; align-self: flex-start;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>
<div id="align_content_stretch_and_align_items_flex_start_with_flex_wrap"
style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: stretch;align-items: flex-start;">
<div style="height: 50px; width: 150px; align-self: flex-end;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>
<div id="align_content_stretch_and_align_items_center_with_flex_wrap"
style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: stretch;align-items: center;">
<div style="height: 50px; width: 150px; align-self: flex-end;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>
<div id="align_content_stretch_and_align_items_stretch_with_flex_wrap"
style="width: 300px; height: 300px; flex-direction: row; flex-wrap: wrap; align-content: stretch;align-items: stretch;">
<div style="height: 50px; width: 150px; align-self: flex-end;"></div>
<div style="height: 100px; width: 120px;"></div>
<div style="height: 50px; width: 120px;"></div>
</div>
Reference in New Issue View Git Blame Copy Permalink