diff --git a/assets/scss/flex.scss b/assets/scss/flex.scss
new file mode 100644
index 0000000..21bf36f
--- /dev/null
+++ b/assets/scss/flex.scss
@@ -0,0 +1,118 @@
+
+/* ========================================================================
+   Component: Flex
+ ========================================================================== */
+
+ .flex { display: flex; }
+ .flex-inline { display: inline-flex; }
+
+ /*
+  * Remove pseudo elements created by micro clearfix as precaution
+  */
+
+ .flex::before,
+ .flex::after,
+ .flex-inline::before,
+ .flex-inline::after { display: none; }
+
+
+ /* Alignment
+  ========================================================================== */
+
+ /*
+  * Align items along the main axis of the current line of the flex container
+  * Row: Horizontal
+  */
+
+ // Default
+ .flex-left { justify-content: flex-start; }
+ .flex-center { justify-content: center; }
+ .flex-right { justify-content: flex-end; }
+ .flex-between { justify-content: space-between; }
+ .flex-around { justify-content: space-around; }
+
+
+ /*
+  * Align items in the cross axis of the current line of the flex container
+  * Row: Vertical
+  */
+
+ // Default
+ .flex-stretch { align-items: stretch; }
+ .flex-top { align-items: flex-start; }
+ .flex-middle { align-items: center; }
+ .flex-bottom { align-items: flex-end; }
+ .flex-baseline { align-items: baseline; }
+
+
+ /* Direction
+  ========================================================================== */
+
+ // Default
+ .flex-row { flex-direction: row; }
+ .flex-row-reverse { flex-direction: row-reverse; }
+ .flex-column { flex-direction: column; }
+ .flex-column-reverse { flex-direction: column-reverse; }
+
+
+ /* Wrap
+  ========================================================================== */
+
+ // Default
+ .flex-nowrap { flex-wrap: nowrap; }
+ .flex-wrap { flex-wrap: wrap; }
+ .flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+ /*
+  * Aligns items within the flex container when there is extra space in the cross-axis
+  * Only works if there is more than one line of flex items
+  */
+
+ // Default
+ .flex-wrap-stretch { align-content: stretch; }
+ .flex-wrap-top { align-content: flex-start; }
+ .flex-wrap-middle { align-content: center; }
+ .flex-wrap-bottom { align-content: flex-end; }
+ .flex-wrap-between { align-content: space-between; }
+ .flex-wrap-around { align-content: space-around; }
+
+
+ /* Item ordering
+  ========================================================================== */
+
+ /*
+  * Default is 0
+  */
+
+ .flex-first { order: -1;}
+ .flex-last { order: 99;}
+
+
+ /* Item dimensions
+  ========================================================================== */
+
+ /*
+  * Initial: 0 1 auto
+  * Content dimensions, but shrinks
+  */
+
+ /*
+  * No Flex: 0 0 auto
+  * Content dimensions
+  */
+
+ .flex-none { flex: none; }
+
+ /*
+  * Relative Flex: 1 1 auto
+  * Space is allocated considering content
+  */
+
+ .flex-auto { flex: auto; }
+
+ /*
+  * Absolute Flex: 1 1 0%
+  * Space is allocated solely based on flex
+  */
+
+ .flex-1 { flex: 1; }