diff --git a/spec/LayoutSpec.js b/spec/LayoutSpec.js index b3422c6a..a3fdd4d0 100755 --- a/spec/LayoutSpec.js +++ b/spec/LayoutSpec.js @@ -479,6 +479,17 @@ describe('Layout', function() { ); }); + it('should layout node with padding and a child', function() { + testLayout( + {style: {padding: 5}, children: [ + {style: {}} + ]}, + {width: 10, height: 10, top: 0, left: 0, children: [ + {width: 0, height: 0, top: 5, left: 5} + ]} + ); + }); + it('should layout randomly', function() { function RNG(seed) { this.state = seed; diff --git a/src/Layout.js b/src/Layout.js index e4254548..0ec5fc89 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -190,16 +190,18 @@ function computeLayout(node) { children.forEach(function(child) { var alignItem = getAlignItem(node, child); var remainingCrossDim = node.layout[dim[crossAxis]] - - getDimWithMargin(child, crossAxis); - var leadingCrossDim = 0; + getDimWithMargin(child, crossAxis) - + getPadding(leading[crossAxis], node) - + getPadding(trailing[crossAxis], node); + var leadingCrossDim = getPadding(leading[crossAxis], node); if (alignItem === 'flex-start') { // Do nothing } else if (alignItem === 'center') { - leadingCrossDim = remainingCrossDim / 2; + leadingCrossDim += remainingCrossDim / 2; } else if (alignItem === 'flex-end') { - leadingCrossDim = remainingCrossDim; + leadingCrossDim += remainingCrossDim; } else if (alignItem === 'stretch') { - child.layout[dim[crossAxis]] = node.layout[dim[crossAxis]] - + child.layout[dim[crossAxis]] += node.layout[dim[crossAxis]] - getMargin(leading[crossAxis], child) - getMargin(trailing[crossAxis], child); }