add flex system for front page and api reference. (angular#2706)

This code chunk was originally from Material 1. We’ve removed
angular-material.css since its namespace collides with Material 2.

Author: Eric Jimenez

public/resources/css/module/_home-promos.scss

@@ -78,3 +78,54 @@
     }
   }
 }
+
+[layout="row"] {
+  box-sizing: border-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+[flex="20"] {
+  -webkit-flex: 1 1 20%;
+  -ms-flex: 1 1 20%;
+  flex: 1 1 20%;
+  max-width: 20%;
+  max-height: 100%;
+  box-sizing: border-box;
+}
+
+[flex="80"] {
+  -webkit-flex: 1 1 80%;
+  -ms-flex: 1 1 80%;
+  flex: 1 1 80%;
+  max-width: 80%;
+  max-height: 100%;
+  box-sizing: border-box;
+}
+
+[flex="100"] {
+  -webkit-flex: 1 1 100%;
+  -ms-flex: 1 1 100%;
+  flex: 1 1 100%;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+}
+
+@media (max-width: 599px) {
+  [flex-xs="100"] {
+    -webkit-flex: 1 1 100%;
+    -ms-flex: 1 1 100%;
+    flex: 1 1 100%;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+  }
+
+  [layout-xs="column"] {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}