Add u-flexInline

Author: simonsmith

README.md

@@ -14,7 +14,8 @@ SUIT CSS flexbox utilities
 
 **`flex-container`**
 
-* `u-flex` - Set `display: flex`
+* `u-flex` - Create a flex container
+* `u-flexInline` - Create an inline flex container
 
 **`flex-direction`**
 

lib/flex-lg.css

@@ -9,13 +9,17 @@
      ========================================================================== */
 
   /**
-   * Flex container
+   * Container
    */
 
   .u-lg-flex {
     display: flex !important;
   }
 
+  .u-lg-flexInline {
+    display: inline-flex !important;
+  }
+
   /**
    * Direction: row
    */

lib/flex-md.css

@@ -9,13 +9,17 @@
      ========================================================================== */
 
   /**
-   * Flex container
+   * Container
    */
 
   .u-md-flex {
     display: flex !important;
   }
 
+  .u-md-flexInline {
+    display: inline-flex !important;
+  }
+
   /**
    * Direction: row
    */

lib/flex-sm.css

@@ -9,13 +9,17 @@
      ========================================================================== */
 
   /**
-   * Flex container
+   * Container
    */
 
   .u-sm-flex {
     display: flex !important;
   }
 
+  .u-sm-flexInline {
+    display: inline-flex !important;
+  }
+
   /**
    * Direction: row
    */

lib/flex.css

@@ -4,13 +4,17 @@
    ========================================================================== */
 
 /**
- * Flex container
+ * Container
  */
 
 .u-flex {
   display: flex !important;
 }
 
+.u-flexInline {
+  display: inline-flex !important;
+}
+
 /**
  * Direction: row
  */

test/index.html

@@ -45,6 +45,26 @@ <h3 class="Test-it">creates a flex container</h3>
     </div>
   </div>
 
+  <h2 class="Test-describe">.u-flexInline</h2>
+  <h3 class="Test-it">creates an inline flex container</h3>
+  <div class="Test-run">
+    <div class="u-flexInline">
+      <div class="FlexItem">
+        <div class="Content">flex container should be in a row</div>
+      </div>
+    </div>
+    <div class="u-flexInline">
+      <div class="FlexItem">
+        <div class="Content">flex container should be in a row</div>
+      </div>
+    </div>
+    <div class="u-flexInline">
+      <div class="FlexItem">
+        <div class="Content">flex container should be in a row</div>
+      </div>
+    </div>
+  </div>
+
   <h2 class="Test-describe">.u-flexRow</h2>
   <h3 class="Test-it">displays items in a row</h3>
   <div class="Test-run">