a1c75454e9
Summary: This is an update of facebook/yoga#368 which was reverted. It fixes support for align-content: strech with multiple lines. The problem with the last attempt at solving this was that align-items:stretch was interfering. We handle this now by detecting when the flex basis of the children hints at them overflowing. This is not 100% correct as the size of the items could change when remeasuring but it will work in 99% of cases. Reviewed By: astreet Differential Revision: D4551234 fbshipit-source-id: 2964f19cf415991dc55dfa2caa4868cb00c56bd0
47 lines
1.9 KiB
HTML
47 lines
1.9 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>
|