From 3760c938a593cd355e2ba1cb0d0c995bd070bbc4 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Tue, 1 Aug 2017 16:00:55 -0400
Subject: [PATCH] Work-in-progress improvements to flex utilities.

---
 src/utilities/flex.less | 83 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)

diff --git a/src/utilities/flex.less b/src/utilities/flex.less
index e4acba06b..5cc21f424 100644
--- a/src/utilities/flex.less
+++ b/src/utilities/flex.less
@@ -4,6 +4,7 @@
 .flex-col {
   display: flex;
   flex-direction: column;
+
   .flex-reverse {
     flex-direction: column-reverse;
   }
@@ -15,6 +16,11 @@
   align-items: center;
 }
 
+.flex-x-center {
+  display: flex;
+  justify-content: center;
+}
+
 .flex-y-center {
   display: flex;
   align-items: center;
@@ -30,6 +36,11 @@
   align-items: baseline;
 }
 
+.inline-flex-y-center {
+  display: inline-flex;
+  align-items: center;
+}
+
 .flex-right {
   justify-content: flex-end;
 }
@@ -44,9 +55,81 @@
   justify-content: space-around;
 }
 
+.flex-grow { flex-grow: 1; }
 .flex-fill { max-width: 100%; flex: 1; }
 .flex-no-shrink { flex-shrink: 0; }
 .flex-inline { display: inline-flex; }
 
 .flex-reverse { flex-direction: row-reverse; }
 .flex-wrap { flex-wrap: wrap; }
+
+.flex-1 { flex: 1; }
+.flex-2 { flex: 2; }
+.flex-3 { flex: 3; }
+.flex-4 { flex: 4; }
+.flex-5 { flex: 5; }
+.flex-6 { flex: 6; }
+.flex-7 { flex: 7; }
+.flex-8 { flex: 8; }
+.flex-9 { flex: 9; }
+.flex-10 { flex: 10; }
+.flex-11 { flex: 11; }
+.flex-12 { flex: 12; }
+
+.flex-basis-1 { flex-basis: 100% * (1/12); }
+.flex-basis-2 { flex-basis: 100% * (2/12); }
+.flex-basis-3 { flex-basis: 100% * (3/12); }
+.flex-basis-4 { flex-basis: 100% * (4/12); }
+.flex-basis-5 { flex-basis: 100% * (5/12); }
+.flex-basis-6 { flex-basis: 100% * (6/12); }
+.flex-basis-7 { flex-basis: 100% * (7/12); }
+.flex-basis-8 { flex-basis: 100% * (8/12); }
+.flex-basis-9 { flex-basis: 100% * (9/12); }
+.flex-basis-10 { flex-basis: 100% * (10/12); }
+.flex-basis-11 { flex-basis: 100% * (11/12); }
+.flex-basis-12 { flex-basis: 100% * (12/12); }
+
+.responsive({
+    &flex { .flex; }
+    &flex-top { .flex-top; }
+    &flex-col { .flex-col; }
+    &flex-center { .flex-center; }
+    &flex-x-center  { .flex-x-center ; }
+    &flex-y-center { .flex-y-center; }
+    &flex-y-end { .flex-y-end; }
+    &flex-y-baseline { .flex-y-baseline; }
+    &inline-flex-y-center { .inline-flex-y-center; }
+    &flex-right { .flex-right; }
+    &flex-spaced { .flex-spaced; }
+    &flex-around { .flex-around; }
+    &flex-grow { .flex-grow; }
+    &flex-fill { .flex-fill; }
+    &flex-no-shrink { .flex-no-shrink; }
+    &flex-inline { .flex-inline; }
+    &flex-reverse { .flex-reverse; }
+    &flex-wrap { .flex-wrap; }
+    &flex-1 { .flex-1; }
+    &flex-2 { .flex-2; }
+    &flex-3 { .flex-3; }
+    &flex-4 { .flex-4; }
+    &flex-5 { .flex-5; }
+    &flex-6 { .flex-6; }
+    &flex-7 { .flex-7; }
+    &flex-8 { .flex-8; }
+    &flex-9 { .flex-9; }
+    &flex-10 { .flex-10; }
+    &flex-11 { .flex-11; }
+    &flex-12 { .flex-12; }
+    &flex-basis-1 { .flex-basis-1; }
+    &flex-basis-2 { .flex-basis-2; }
+    &flex-basis-3 { .flex-basis-3; }
+    &flex-basis-4 { .flex-basis-4; }
+    &flex-basis-5 { .flex-basis-5; }
+    &flex-basis-6 { .flex-basis-6; }
+    &flex-basis-7 { .flex-basis-7; }
+    &flex-basis-8 { .flex-basis-8; }
+    &flex-basis-9 { .flex-basis-9; }
+    &flex-basis-10 { .flex-basis-10; }
+    &flex-basis-11 { .flex-basis-11; }
+    &flex-basis-12 { .flex-basis-12; }
+});