DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Feature auto margin

Browse Source 
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
This commit is contained in:
Lukas Wöhrl
2017-02-14 14:26:09 -08:00
committed by Facebook Github Bot
parent 8a91c0a0e5
commit 1146013e9e
29 changed files with 3353 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
gentest/fixtures/YGMarginTest.html
View File

@@ -39,3 +39,70 @@
<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>