diff --git a/src/Layout.js b/src/Layout.js index 1d484685..58a7a188 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -192,6 +192,8 @@ var computeLayout = (function() { } } else { flexibleChildrenCount++; + mainContentDim += getPadding(child, leading[mainAxis]) + + getPadding(child, trailing[mainAxis]); } } @@ -210,7 +212,9 @@ var computeLayout = (function() { if (getFlex(child)) { child.layout[dim[mainAxis]] = flexibleMainDim - getMargin(child, leading[mainAxis]) - - getMargin(child, trailing[mainAxis]); + getMargin(child, trailing[mainAxis]) + + getPadding(child, leading[mainAxis]) + + getPadding(child, trailing[mainAxis]); layoutNode(child); } } diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index c58bc3fb..a2772195 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -447,7 +447,7 @@ describe('Layout', function() { it('should layout node with height, padding and space-around', function() { testLayout( - {style : {height: 10, paddingTop: 5, justifyContent: 'space-around'}, children: [ + {style: {height: 10, paddingTop: 5, justifyContent: 'space-around'}, children: [ {style: {}} ]}, {width: 0, height: 10, top: 0, left: 0, children: [ @@ -608,7 +608,7 @@ describe('Layout', function() { ); }); - it('should llll', function() { + it('should layout node with flex and main margin', function() { testLayout( {style: {width: 700, flexDirection: 'row'}, children: [ {style: {marginLeft: 5, flex: 1}} @@ -619,6 +619,20 @@ describe('Layout', function() { ); }); + it('should layout node with multiple flex and padding', function() { + testLayout( + {style: {width: 700, flexDirection: 'row'}, children: [ + {style: {flex: 1}}, + {style: {paddingRight: 5, flex: 1}} + ]}, + {width: 700, height: 0, top: 0, left: 0, children: [ + {width: 347.5, height: 0, top: 0, left: 0}, + {width: 352.5, height: 0, top: 0, left: 347.5} + ]} + ); + }); + + it('should layout randomly', function() { function RNG(seed) { this.state = seed;