fix(layouts): support layout-align start and stretch

fixes #5509. fixes #5249.

Author: ThomasBurleson

docs/app/partials/layout-alignment.tmpl.html

@@ -74,6 +74,7 @@
         <md-radio-button value="end">end</md-radio-button>
         <md-radio-button value="space-around">space-around</md-radio-button>
         <md-radio-button value="space-between">space-between</md-radio-button>
+        <md-radio-button value="stretch">stretch</md-radio-button>
       </md-radio-group>
     </div>
     <div>
@@ -82,6 +83,7 @@
         <md-radio-button value="start">start</md-radio-button>
         <md-radio-button value="center">center</md-radio-button>
         <md-radio-button value="end">end</md-radio-button>
+        <md-radio-button value="stretch">stretch</md-radio-button>
       </md-radio-group>
     </div>
 

src/core/services/layout/layout.js

@@ -8,13 +8,8 @@
 
   var FLEX_OPTIONS = ['grow', 'initial', 'auto', 'none'];
   var LAYOUT_OPTIONS = ['row', 'column'];
-  var ALIGNMENT_OPTIONS = [
-        "start start", "start center", "start end",
-        "center", "center center", "center start", "center end",
-        "end", "end center", "end start", "end end",
-        "space-around", "space-around center", "space-around start", "space-around end",
-        "space-between", "space-between center", "space-between start", "space-between end"
-      ];
+  var ALIGNMENT_MAIN_AXIS= [ "", "start", "center", "end", "stretch", "space-around", "space-between" ];
+  var ALIGNMENT_CROSS_AXIS= [ "", "start", "center", "end", "stretch" ];
 
 
   var config = {
@@ -373,9 +368,14 @@
           break;
 
         case 'layout-align'  :
-          if (!findIn(value, ALIGNMENT_OPTIONS, "-")) {
-            value = ALIGNMENT_OPTIONS[0];   // 'start-start';
-          }
+          var axis = value.split(" ");
+          var main = axis.length ? axis[0] : "stretch";
+          var cross = axis.length > 1 ? axis[1] : "stretch";
+
+          if ( ALIGNMENT_MAIN_AXIS.indexOf(main) < 0 ) main = "stretch";
+          if ( ALIGNMENT_CROSS_AXIS.indexOf(cross) < 0 ) cross = "stretch";
+
+          value = main + " " + cross;
           break;
 
         case 'layout-padding' :

src/core/services/layout/layout.scss

@@ -181,24 +181,50 @@
     $name: 'layout-align-#{$suffix}';
   }
 
+  .#{$name},
+  .#{$name}-stretch-stretch // defaults
+  {
+    justify-content : stretch;
+    align-content : stretch;
+    align-items: stretch;
+  }
+
+  // Main Axis Center
+  .#{$name}-start,
+  .#{$name}-start-start,
+  .#{$name}-start-center,
+  .#{$name}-start-end
+  {
+    justify-content: start;
+  }
+
   // Main Axis Center
   .#{$name}-center,           //stretch
-  .#{$name}-center-center,
   .#{$name}-center-start,
+  .#{$name}-center-center,
   .#{$name}-center-end
   {
     justify-content: center;
   }
 
   // Main Axis End
   .#{$name}-end, //stretch
-  .#{$name}-end-center,
   .#{$name}-end-start,
+  .#{$name}-end-center,
   .#{$name}-end-end
   {
     justify-content: flex-end;
   }
 
+  // Main Axis Center
+  .#{$name}-stretch,
+  .#{$name}-stretch-center,
+  .#{$name}-stretch-start,
+  .#{$name}-stretch-end
+  {
+    justify-content: stretch;
+  }
+
   // Main Axis Space Around
   .#{$name}-space-around, //stretch
   .#{$name}-space-around-center,
@@ -231,6 +257,7 @@
   .#{$name}-space-around-start
   {
     align-items: flex-start;
+    align-content: flex-start;
   }
 
   // Cross Axis Center
@@ -241,6 +268,7 @@
   .#{$name}-space-around-center
   {
     align-items: center;
+    align-content: center;
     max-width: 100%;
   }
 
@@ -263,6 +291,18 @@
   .#{$name}-space-around-end
   {
     align-items: flex-end;
+    align-content: flex-end;
+  }
+
+  // Cross Axis Start
+  .#{$name}-center-stretch,
+  .#{$name}-start-stretch,
+  .#{$name}-end-stretch,
+  .#{$name}-space-between-stretch,
+  .#{$name}-space-around-stretch
+  {
+    align-items: stretch;
+    align-content: stretch;
   }
 }