diff --git a/src/Layout.js b/src/Layout.js index 28c21c32..99a52cee 100755 --- a/src/Layout.js +++ b/src/Layout.js @@ -353,7 +353,6 @@ var computeLayout = (function() { } } - // Layout flexible children and allocate empty space // In order to position the elements in the main axis, we have two @@ -422,8 +421,12 @@ var computeLayout = (function() { leadingMainDim = remainingMainDim; } else if (justifyContent === CSS_JUSTIFY_SPACE_BETWEEN) { remainingMainDim = fmaxf(remainingMainDim, 0); - betweenMainDim = remainingMainDim / - (flexibleChildrenCount + nonFlexibleChildrenCount - 1); + if (flexibleChildrenCount + nonFlexibleChildrenCount - 1 !== 0) { + betweenMainDim = remainingMainDim / + (flexibleChildrenCount + nonFlexibleChildrenCount - 1); + } else { + betweenMainDim = 0; + } } else if (justifyContent === CSS_JUSTIFY_SPACE_AROUND) { // Space on the edges is half of the space between elements betweenMainDim = remainingMainDim / diff --git a/src/__tests__/Layout-test.js b/src/__tests__/Layout-test.js index 87d55228..bf8b29ac 100755 --- a/src/__tests__/Layout-test.js +++ b/src/__tests__/Layout-test.js @@ -1000,7 +1000,7 @@ describe('Layout', function() { ); }); - it('should calcluate left properly with position: absolute right', function() { + it('should calculate left properly with position: absolute right', function() { testLayout( {style: {width: 100}, children: [ {style: {position: 'absolute', right: 0}} @@ -1022,7 +1022,7 @@ describe('Layout', function() { ); }); - it('should calcluate left properly with position: absolute right and width', function() { + it('should calculate left properly with position: absolute right and width', function() { testLayout( {style: {width: 100}, children: [ {style: {width: 10, position: 'absolute', right: 0}} @@ -1033,7 +1033,7 @@ describe('Layout', function() { ); }); - it('should calcluate top properly with position: absolute right, width, and no parent dimensions', function() { + it('should calculate top properly with position: absolute right, width, and no parent dimensions', function() { testLayout( {style: {}, children: [ {style: {height: 10, position: 'absolute', bottom: 0}} @@ -1066,6 +1066,17 @@ describe('Layout', function() { ); }); + it('should layout border bottom inside of justify content space between container', function() { + testLayout( + {style: {justifyContent: 'space-between'}, children: [ + {style: {borderBottomWidth: 1}} + ]}, + {width: 0, height: 1, top: 0, left: 0, children: [ + {width: 0, height: 1, top: 0, left: 0} + ]} + ); + }); + xit('should layout flex-wrap', function() { testLayout( {style: {flexWrap: 'wrap', flexDirection: 'row', width: 100}, children: [