DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
397d304e14aa75669df75fef43f9d9722c1c953f
yoga/gentest/fixtures/YGAlignContentTest.html
Nick Gerleman a1751127ef Fix align-content of cross-stretched container (#1524) 
Summary:
X-link: https://github.com/facebook/react-native/pull/41964

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

D52087013 (#1513) fixed some issues, including where measuring under max-content or fit-content, align-content stretch would consume the entire available cross-dimensions, instead of only sizing to definite dimension, like the spec dicates.

I missed a case, where flexbox considers a container as having a definite cross-size if it is being stretched, even if it doesn't have a definite length.

https://www.w3.org/TR/css-flexbox-1/#definite-sizes

> 3. Once the cross size of a flex line has been determined, items in auto-sized flex containers are also considered definite for the purpose of layout;

> 1. If a single-line flex container has a definite cross size, the outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered definite.

We handle `align-items: stretch` of a flex container after cross-size determination by laying out the child under stretch-fit (previously YGMeasureModeExactly) constraint. This checks that case, and sizing the line container to specified cross-dim if we are told to stretch to it.

We could probably afford to merge this a bit with later with what is currently step 9, where we end up redoing some of this same math.

Reviewed By: yungsters

Differential Revision: D52234980

fbshipit-source-id: 475773a352fd01f63a4b21e93a55519726dc0da7
2023-12-17 01:13:36 -08:00

435 lines
22 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_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_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>
Reference in New Issue View Git Blame Copy Permalink