justifyContent

spec/LayoutSpec.js

@@ -41,6 +41,7 @@ function computeDOMLayout(node) {
     transfer(div, node, 'marginRight', 'px');
     transfer(div, node, 'flexDirection');
     transfer(div, node, 'flex');
+    transfer(div, node, 'justifyContent');
     parent.appendChild(div);
     (node.children || []).forEach(function(child) {
       renderNode(div, child);
@@ -254,7 +255,7 @@ describe('Layout', function() {
     });
   });
 
-  it('should layout node with targetted margin', function() {
+  it('should layout node with targeted margin', function() {
     testLayout({
       style: {width: 1000, height: 1000, marginTop: 10, marginLeft: 5},
       children: [
@@ -271,5 +272,85 @@ describe('Layout', function() {
     });
   });
 
+  it('should layout node with justifyContent: flex-start', function() {
+    testLayout({
+      style: {width: 1000, height: 1000, justifyContent: 'flex-start'},
+      children: [
+        {style: {width: 100, height: 100}},
+        {style: {width: 100, height: 100}}
+      ]
+    }, {
+      width: 1000, height: 1000, top: 0, left: 0,
+      children: [
+        {width: 100, height: 100, top: 0, left: 0},
+        {width: 100, height: 100, top: 100, left: 0}
+      ]
+    });
+  });
+
+  it('should layout node with justifyContent: flex-end', function() {
+    testLayout({
+      style: {width: 1000, height: 1000, justifyContent: 'flex-end'},
+      children: [
+        {style: {width: 100, height: 100}},
+        {style: {width: 100, height: 100}}
+      ]
+    }, {
+      width: 1000, height: 1000, top: 0, left: 0,
+      children: [
+        {width: 100, height: 100, top: 800, left: 0},
+        {width: 100, height: 100, top: 900, left: 0}
+      ]
+    });
+  });
+
+  it('should layout node with justifyContent: space-between', function() {
+    testLayout({
+      style: {width: 1000, height: 1000, justifyContent: 'space-between'},
+      children: [
+        {style: {width: 100, height: 100}},
+        {style: {width: 100, height: 100}}
+      ]
+    }, {
+      width: 1000, height: 1000, top: 0, left: 0,
+      children: [
+        {width: 100, height: 100, top: 0, left: 0},
+        {width: 100, height: 100, top: 900, left: 0}
+      ]
+    });
+  });
+
+  it('should layout node with justifyContent: space-around', function() {
+    testLayout({
+      style: {width: 1000, height: 1000, justifyContent: 'space-around'},
+      children: [
+        {style: {width: 100, height: 100}},
+        {style: {width: 100, height: 100}}
+      ]
+    }, {
+      width: 1000, height: 1000, top: 0, left: 0,
+      children: [
+        {width: 100, height: 100, top: 200, left: 0},
+        {width: 100, height: 100, top: 700, left: 0}
+      ]
+    });
+  });
+
+  it('should layout node with justifyContent: center', function() {
+    testLayout({
+      style: {width: 1000, height: 1000, justifyContent: 'center'},
+      children: [
+        {style: {width: 100, height: 100}},
+        {style: {width: 100, height: 100}}
+      ]
+    }, {
+      width: 1000, height: 1000, top: 0, left: 0,
+      children: [
+        {width: 100, height: 100, top: 400, left: 0},
+        {width: 100, height: 100, top: 500, left: 0}
+      ]
+    });
+  });
+
 });
 

src/Layout.js

@@ -42,6 +42,13 @@ function computeLayout(node) {
     return 0;
   }
 
+  function getJustifyContent(node) {
+    if ('justifyContent' in node.style) {
+      return node.style.justifyContent;
+    }
+    return 'flex-start';
+  }
+
   var axis = {
     left: 'horizontal',
     right: 'horizontal',
@@ -88,21 +95,40 @@ function computeLayout(node) {
       }
     });
 
-    var flexibleMainDim =
+    var remainingMainDim = node.layout[dim[mainAxis]] - mainContentDim;
-      (node.layout[dim[mainAxis]] - mainContentDim) / flexibleChildrenCount;
+    var leadingMainDim = 0;
+    var betweenMainDim = 0;
+    if (flexibleChildrenCount) {
+      var flexibleMainDim = remainingMainDim / flexibleChildrenCount;
       children.forEach(function(child) {
         if (child.style.flex) {
           child.layout[dim[mainAxis]] = flexibleMainDim;
           layoutNode(child);
         }
       });
+    } else {
+      var justifyContent = getJustifyContent(node);
+      if (justifyContent == 'flex-start') {
+        // Do nothing
+      } else if (justifyContent === 'flex-end') {
+        leadingMainDim = remainingMainDim;
+      } else if (justifyContent === 'center') {
+        leadingMainDim = remainingMainDim / 2;
+      } else if (justifyContent === 'space-between') {
+        betweenMainDim = remainingMainDim / (children.length - 1);
+      } else if (justifyContent === 'space-around') {
+        betweenMainDim = remainingMainDim / children.length;
+        leadingMainDim = betweenMainDim / 2;
+      }
+    }
 
-    var mainPos = 0;
+    var mainPos = leadingMainDim;
     children.forEach(function(child) {
       child.layout[pos[mainAxis]] += mainPos;
       mainPos += child.layout[dim[mainAxis]] +
         getMargin(leading[mainAxis], child) +
-        getMargin(trailing[mainAxis], child);
+        getMargin(trailing[mainAxis], child) +
+        betweenMainDim;
     });
 
     if (node.layout[dim[mainAxis]] === undefined && !mainDimInStyle) {