1146013e9e
Summary: Even so I know there are some opinions against ```margin: 0 auto``` it's still part of the spec: https://www.w3.org/TR/css-flexbox-1/#auto-margins and pretty usefull if you have to position via ```justify-content```. This PR adds an implementation for that. It adds an additonal ```YGUnitAuto``` and margins got ```YGNodeStyleSetMarginAuto``` functions as well. Closes https://github.com/facebook/yoga/pull/357 Reviewed By: astreet Differential Revision: D4501142 Pulled By: emilsjolander fbshipit-source-id: 86519f8632496f46e78a7c9dbc5b21e212e3e0c7
109 lines
4.8 KiB
HTML
109 lines
4.8 KiB
HTML
<div id="margin_start" style="width: 100px; height: 100px; flex-direction: row;">
|
|
<div style="width: 10px; margin-start: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_top" style="width: 100px; height: 100px;">
|
|
<div style="height: 10px; margin-top: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_end" style="width: 100px; height: 100px; flex-direction: row; justify-content: flex-end;">
|
|
<div style="width: 10px; margin-end: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_bottom" style="width: 100px; height: 100px; justify-content: flex-end;">
|
|
<div style="height: 10px; margin-bottom: 10px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_and_flex_row" style="width: 100px; height: 100px; flex-direction: row;">
|
|
<div style="margin-start: 10px; margin-end: 10px; flex-grow: 1;"></div>
|
|
</div>
|
|
|
|
<div id="margin_and_flex_column" style="width: 100px; height: 100px;">
|
|
<div style="margin-top: 10px; margin-bottom: 10px; flex-grow: 1;"></div>
|
|
</div>
|
|
|
|
<div id="margin_and_stretch_row" style="width: 100px; height: 100px; flex-direction: row;">
|
|
<div style="margin-top: 10px; margin-bottom: 10px; flex-grow: 1;"></div>
|
|
</div>
|
|
|
|
<div id="margin_and_stretch_column" style="width: 100px; height: 100px;">
|
|
<div style="margin-start: 10px; margin-end: 10px; flex-grow: 1;"></div>
|
|
</div>
|
|
|
|
<div id="margin_with_sibling_row" style="width: 100px; height: 100px; flex-direction: row;">
|
|
<div style="margin-end: 10px; flex-grow: 1;"></div>
|
|
<div style="flex-grow: 1;"></div>
|
|
</div>
|
|
|
|
<div id="margin_with_sibling_column" style="width: 100px; height: 100px;">
|
|
<div style="margin-bottom: 10px; flex-grow: 1;"></div>
|
|
<div style="flex-grow: 1;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_bottom" style="width: 200px; height: 200px; align-items: center;">
|
|
<div style="width: 50px; height: 50px; margin-bottom:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_top" style="width: 200px; height: 200px; align-items: center;">
|
|
<div style="width: 50px; height: 50px; margin-top:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_bottom_and_top" style="width: 200px; height: 200px; align-items: center;">
|
|
<div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_bottom_and_top_justify_center" style="width: 200px; height: 200px; justify-content: center;">
|
|
<div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_mutiple_children_column" style="width: 200px; height: 200px; flex-direction: column; align-items: center;">
|
|
<div style="width: 50px; height: 50px; margin-top:auto;"></div>
|
|
<div style="width: 50px; height: 50px; margin-top:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_mutiple_children_row" style="width: 200px; height: 200px; flex-direction:row; align-items: center;">
|
|
<div style="width: 50px; height: 50px; margin-right:auto;"></div>
|
|
<div style="width: 50px; height: 50px; margin-right:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_left_and_right_column" style="width: 200px; height: 200px; align-items: center; flex-direction: row;">
|
|
<div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_left_and_right" style="width: 200px; height: 200px; ">
|
|
<div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_left_and_right_column_and_center" style="width: 200px; height: 200px; align-items: center;">
|
|
<div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_left" style="width: 200px; height: 200px; align-items: center;">
|
|
<div style="width: 50px; height: 50px; margin-left:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_right" style="width: 200px; height: 200px; align-items: center;">
|
|
<div style="width: 50px; height: 50px; margin-right:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_left_and_right_strech" style="width: 200px; height: 200px; flex-direction:row; align-items: stretch;">
|
|
<div style="width: 50px; height: 50px; margin-left:auto; margin-right:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|
|
|
|
<div id="margin_auto_top_and_bottom_strech" style="width: 200px; height: 200px; flex-direction: column; align-items: stretch;">
|
|
<div style="width: 50px; height: 50px; margin-top:auto; margin-bottom:auto;"></div>
|
|
<div style="width: 50px; height: 50px;"></div>
|
|
</div>
|