1080cf22e3
Summary: This diff updates the logic which reassigns `remainingFreeSpace` when the node's calculated dimension falls below min width of the node. So we will have to update the `remainingFreeSpace` as there is more available space since the calculated nodes width is less than the min width. I have also added comments at relevant places in the code so that it is clearer. This diff solves the issue raised in litho support grp. The details can be found here T32199608. This diff also makes sure that it doesn't break fblite, as the earlier version broke it, details of which can be found here T32881750. Reviewed By: IanChilds Differential Revision: D9359026 fbshipit-source-id: 4168e385e962c168a9de9370220c75f14a6726a7
104 lines
4.5 KiB
HTML
104 lines
4.5 KiB
HTML
<div id="justify_content_row_flex_start" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-start;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_row_flex_end" style="width: 102px; height: 102px; flex-direction: row; justify-content: flex-end;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_row_center" style="width: 102px; height: 102px; flex-direction: row; justify-content: center;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_row_space_between" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-between;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_row_space_around" style="width: 102px; height: 102px; flex-direction: row; justify-content: space-around;">
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
<div style="width: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_column_flex_start" style="width: 102px; height: 102px; justify-content: flex-start;">
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_column_flex_end" style="width: 102px; height: 102px; justify-content: flex-end;">
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_column_center" style="width: 102px; height: 102px; justify-content: center;">
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_column_space_between" style="width: 102px; height: 102px; justify-content: space-between;">
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_column_space_around" style="width: 102px; height: 102px; justify-content: space-around;">
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_row_min_width_and_margin" style="min-width: 50px; margin-left: 100px; justify-content: center; flex-direction: row;">
|
|
<div style="height: 20px; width: 20px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_row_max_width_and_margin" style="width: 100px; max-width: 80px; margin-left: 100px; justify-content: center; flex-direction: row;">
|
|
<div style="height: 20px; width: 20px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_column_min_height_and_margin" style="min-height: 50px; margin-top: 100px; justify-content: center; flex-direction: column;">
|
|
<div style="height: 20px; width: 20px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_colunn_max_height_and_margin" style="height: 100px; max-height: 80px; margin-top: 100px; justify-content: center; flex-direction: column;">
|
|
<div style="height: 20px; width: 20px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_column_space_evenly" style="width: 102px; height: 102px; justify-content: space-evenly;">
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_row_space_evenly" style="width: 102px; height: 102px; justify-content: space-evenly; flex-direction: row; ">
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
<div style="height: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="justify_content_min_width_with_padding_child_width_greater_than_parent" style="width: 1000px; height: 1584px;">
|
|
<div style="flex-direction: row; align-content: stretch;">
|
|
<div style="flex-direction: row; justify-content: center; align-content: stretch; min-width: 400px; padding-left: 100px; padding-right: 100px;">
|
|
<div style="height: 100px; width: 300px; align-content: stretch; flex-direction: row;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="justify_content_min_width_with_padding_child_width_greater_than_parent" style="width: 1080px; height: 1584px;">
|
|
<div style="flex-direction: row; align-content: stretch;">
|
|
<div style="flex-direction: row; justify-content: center; align-content: stretch; min-width: 400px; padding-left: 100px; padding-right: 100px;">
|
|
<div style="height: 100px; width: 199px; align-content: stretch; flex-direction: row;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|