Add support for space-between and space-around on align-content
Summary: Adds the two missing alignments ```space-between``` and ```space-around``` for ```align-content``` . Those values are a noop on ```align-items``` in order to prevent a breaking changes for an additional enum. Fix #229 Closes https://github.com/facebook/yoga/pull/364 Reviewed By: gkassabli Differential Revision: D4528561 Pulled By: emilsjolander fbshipit-source-id: ea6291b6dd22cef05d9eec03893250d50371236e
This commit is contained in:
committed by
Facebook Github Bot
parent
247aa26d3e
commit
6a7ad2125d
@@ -1,4 +1,4 @@
|
||||
<div id="align_content_flex_start" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
|
||||
<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>
|
||||
@@ -6,7 +6,7 @@
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_flex_end" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-end;">
|
||||
<div id="align_content_flex_end" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; 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>
|
||||
@@ -14,7 +14,7 @@
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_center" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: center;">
|
||||
<div id="align_content_center" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: center;">
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
@@ -22,10 +22,26 @@
|
||||
<div style="width: 50px; height: 10px;"></div>
|
||||
</div>
|
||||
|
||||
<div id="align_content_stretch" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
|
||||
<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>
|
||||
|
@@ -82,7 +82,8 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
|
||||
YGAlignFlexEnd:{value:'YGAlignFlexEnd'},
|
||||
YGAlignFlexStart:{value:'YGAlignFlexStart'},
|
||||
YGAlignStretch:{value:'YGAlignStretch'},
|
||||
|
||||
YGAlignSpaceBetween:{value:'YGAlignSpaceBetween'},
|
||||
YGAlignSpaceAround:{value:'YGAlignSpaceAround'},
|
||||
YGAlignBaseline:{value:'YGAlignBaseline'},
|
||||
|
||||
YGDirectionInherit:{value:'YGDirectionInherit'},
|
||||
|
@@ -96,6 +96,8 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
|
||||
YGAlignFlexEnd:{value:'YogaAlign.FlexEnd'},
|
||||
YGAlignFlexStart:{value:'YogaAlign.FlexStart'},
|
||||
YGAlignStretch:{value:'YogaAlign.Stretch'},
|
||||
YGAlignSpaceBetween:{value:'YogaAlign.SpaceBetween'},
|
||||
YGAlignSpaceAround:{value:'YogaAlign.SpaceAround'},
|
||||
YGAlignBaseline:{value:'YogaAlign.Baseline'},
|
||||
|
||||
YGDirectionInherit:{value:'YogaDirection.Inherit'},
|
||||
|
@@ -100,6 +100,8 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
|
||||
YGAlignFlexEnd:{value:'YogaAlign.FLEX_END'},
|
||||
YGAlignFlexStart:{value:'YogaAlign.FLEX_START'},
|
||||
YGAlignStretch:{value:'YogaAlign.STRETCH'},
|
||||
YGAlignSpaceBetween:{value:'YogaAlign.SPACE_BETWEEN'},
|
||||
YGAlignSpaceAround:{value:'YogaAlign.SPACE_AROUND'},
|
||||
YGAlignBaseline:{value:'YogaAlign.BASELINE'},
|
||||
|
||||
YGDirectionInherit:{value:'YogaDirection.INHERIT'},
|
||||
|
@@ -90,6 +90,8 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
|
||||
YGAlignFlexEnd:{value:'Yoga.ALIGN_FLEX_END'},
|
||||
YGAlignFlexStart:{value:'Yoga.ALIGN_FLEX_START'},
|
||||
YGAlignStretch:{value:'Yoga.ALIGN_STRETCH'},
|
||||
YGAlignSpaceBetween:{value:'Yoga.ALIGN_SPACE_BETWEEN'},
|
||||
YGAlignSpaceAround:{value:'Yoga.ALIGN_SPACE_AROUND'},
|
||||
YGAlignBaseline:{value:'Yoga.ALIGN_BASELINE'},
|
||||
|
||||
YGDirectionInherit:{value:'Yoga.DIRECTION_INHERIT'},
|
||||
|
@@ -381,6 +381,8 @@ function alignValue(e, value) {
|
||||
case 'stretch': return e.YGAlignStretch;
|
||||
case 'flex-start': return e.YGAlignFlexStart;
|
||||
case 'flex-end': return e.YGAlignFlexEnd;
|
||||
case 'space-between': return e.YGAlignSpaceBetween;
|
||||
case 'space-around': return e.YGAlignSpaceAround;
|
||||
case 'baseline': return e.YGAlignBaseline;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user