20536923d6
Summary: I couldn't resist to do this 😄 #394 This adds ```flex-wrap: wrap-reverse``` I think we hit a edge case here: https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width as is differs here from chrome, but I think that yoga is here more correct. So I haven't added this test yet as this would fail against chrome, as chrome outputs a width of 30 for root, whereas yoga gets a width of 60 here, which I think is correct. Strangely the output of ```flex-wrap:wrap``` is in jsfiddle also only with a (visual) width of 30 on chrome, while the tests gets generated with 60. ```html <div id="wrap_reverse_column" style="height: 100px; flex-wrap: wrap-reverse"> <div style="height: 30px; width: 30px;"></div> <div style="height: 30px; width: 30px;"></div> <div style="height: 30px; width: 30px;"></div> <div style="height: 30px; width: 30px;"></div> </div> ``` Looking forward what you think here emilsjolander Closes https://github.com/facebook/yoga/pull/398 Reviewed By: astreet Differential Revision: D4564711 Pulled By: emilsjolander fbshipit-source-id: 33dc055abd8444b2aa7796ef90bd7ec99e961bb8
96 lines
4.3 KiB
HTML
96 lines
4.3 KiB
HTML
<div id="wrap_column" style="height: 100px; flex-wrap: wrap">
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_row" style="width: 100px; flex-direction: row; flex-wrap: wrap">
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_row_align_items_flex_end" style="width: 100px; flex-direction: row; flex-wrap: wrap; align-items: flex-end;">
|
|
<div style="height: 10px; width: 30px;"></div>
|
|
<div style="height: 20px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_row_align_items_center" style="width: 100px; flex-direction: row; flex-wrap: wrap; align-items: center;">
|
|
<div style="height: 10px; width: 30px;"></div>
|
|
<div style="height: 20px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="flex_wrap_children_with_min_main_overriding_flex_basis" style="width: 100px; flex-wrap: wrap; flex-direction: row;">
|
|
<div style="flex-basis: 50px; height: 50px; min-width: 55px;"></div>
|
|
<div style="flex-basis: 50px; height: 50px; min-width: 55px;"></div>
|
|
</div>
|
|
|
|
<div id="flex_wrap_wrap_to_child_height">
|
|
<div style="flex-direction: row; align-items: flex-start; flex-wrap: wrap;">
|
|
<div style="width: 100px;">
|
|
<div style="height: 100px; width: 100px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100px; height: 100px;"></div>
|
|
</div>
|
|
|
|
<div id="flex_wrap_align_stretch_fits_one_row" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: row;">
|
|
<div style="width: 50px;"></div>
|
|
<div style="width: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_reverse_row_align_content_flex_start" style="width: 100px; flex-direction: row; flex-wrap: wrap-reverse; align-content: flex-start;">
|
|
<div style="height: 10px; width: 30px;"></div>
|
|
<div style="height: 20px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 40px; width: 30px;"></div>
|
|
<div style="height: 50px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_reverse_row_align_content_center" style="width: 100px; flex-direction: row; flex-wrap: wrap-reverse; align-content: center;">
|
|
<div style="height: 10px; width: 30px;"></div>
|
|
<div style="height: 20px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 40px; width: 30px;"></div>
|
|
<div style="height: 50px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_reverse_row_single_line_different_size" style="width: 300px; flex-direction: row; flex-wrap: wrap-reverse; align-content: flex-start;">
|
|
<div style="height: 10px; width: 30px;"></div>
|
|
<div style="height: 20px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 40px; width: 30px;"></div>
|
|
<div style="height: 50px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_reverse_row_align_content_stretch" style="width: 100px; flex-direction: row; flex-wrap: wrap-reverse; align-content: stretch;">
|
|
<div style="height: 10px; width: 30px;"></div>
|
|
<div style="height: 20px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 40px; width: 30px;"></div>
|
|
<div style="height: 50px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_reverse_row_align_content_space_around" style="width: 100px; flex-direction: row; flex-wrap: wrap-reverse; align-content: space-around;">
|
|
<div style="height: 10px; width: 30px;"></div>
|
|
<div style="height: 20px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 40px; width: 30px;"></div>
|
|
<div style="height: 50px; width: 30px;"></div>
|
|
</div>
|
|
|
|
<div id="wrap_reverse_column_fixed_size" style="width: 200px; height: 100px; flex-direction: column; flex-wrap: wrap-reverse; align-items: center;">
|
|
<div style="height: 10px; width: 30px;"></div>
|
|
<div style="height: 20px; width: 30px;"></div>
|
|
<div style="height: 30px; width: 30px;"></div>
|
|
<div style="height: 40px; width: 30px;"></div>
|
|
<div style="height: 50px; width: 30px;"></div>
|
|
</div>
|
|
|