063f65d065
Summary: Fixes ```align-content:strech``` on nodes without specified cross dimension, if there are multiple lines. Currently it uses the full height of the parent, but it has to use the line height. As we don't know the number of lines until here, we need to realign the relevant children. Closes https://github.com/facebook/yoga/pull/368 Reviewed By: gkassabli Differential Revision: D4528559 Pulled By: emilsjolander fbshipit-source-id: 019e6f85fa452d0c3412f711e3886f0c4452da47
145 lines
6.3 KiB
HTML
145 lines
6.3 KiB
HTML
<div id="align_content_flex_start" style="width: 130px; height: 100px; 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>
|
|
|
|
<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>
|
|
|
|
<div id="align_content_flex_end" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; 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>
|
|
|
|
<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_spacebetween" style="width: 130px; height: 100px; 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>
|
|
|
|
<div id="align_content_spacearound" 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>
|
|
|
|
<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>
|