Flesh out more flexbox, padding, and margin classes

Author: gelder-ux

scss/_flexbox.scss

@@ -1,14 +1,44 @@
+// CSS Tricks Flexbox reference
+// https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+
+// display
 .display-flex {
 	display: flex;
 }
 
-// justify
-.justify-content-between {
-	justify-content: space-between;
-} 
+// direction
+.flex-direction-row {
+	flex-direction: row;
+}
 
-.justify-content-around {
-	justify-content: space-around;
+.flex-direction-row-reverse {
+	flex-direction: row-reverse;
+}
+
+.flex-direction-column {
+	flex-direction: column;
+}
+
+.flex-direction-column-reverse {
+	flex-direction: column-reverse;
+}
+
+// wrap
+.flex-wrap {
+	flex-wrap: no-wrap;
+}
+
+.flex-nowrap {
+	flex-wrap: nowrap;
+}
+
+.flex-wrap-reverse {
+	flex-wrap: wrap-reverse;
+}
+
+// justify
+.justify-content-center {
+	justify-content: center;
 }
 
 .justify-content-start {
@@ -19,11 +49,19 @@
 	justify-content: flex-end;
 }
 
-// align items
-.align-items-center {
-	align-items: center;
+.justify-content-between {
+	justify-content: space-between;
+} 
+
+.justify-content-around {
+	justify-content: space-around;
 }
 
+.justify-content-evenly {
+	justify-content: space-evenly;
+}
+
+// align items
 .align-items-start {
 	align-items: flex-start;
 }
@@ -32,6 +70,39 @@
 	align-items: flex-end;
 }
 
+.align-items-center {
+	align-items: center;
+}
+
 .align-items-stretch {
 	align-items: stretch;
+}
+
+.align-items-baseline {
+	align-items: baseline;
+}
+
+// align content
+.align-content-start {
+	align-content: flex-start;
+}
+
+.align-content-end {
+	align-content: flex-end;
+}
+
+.align-content-center {
+	align-content: center;
+}
+
+.align-content-stretch {
+	align-content: stretch;
+}
+
+.align-content-between {
+	align-content: space-between;
+}
+
+.align-content-around {
+	align-content: space-around;
 }

scss/_margin.scss

@@ -1,6 +1,14 @@
-$margin-base: 1rem;
+$margin-base: 1rem !default;
 
 // all sides
+.margin-auto {
+	margin: auto;
+}
+
+.margin-0 {
+	margin: 0;
+}
+
 .margin-half {
 	margin: $margin-base / 2;
 }
@@ -18,6 +26,14 @@ $margin-base: 1rem;
 }
 
 // top
+.margin-top-auto {
+	margin-top: auto;
+}
+
+.margin-top-0 {
+	margin-top: 0;
+}
+
 .margin-top-half {
 	margin-top: $margin-base / 2;
 }
@@ -35,6 +51,14 @@ $margin-base: 1rem;
 }
 
 // right
+.margin-right-auto {
+	margin-right: auto;
+}
+
+.margin-right-0 {
+	margin-right: 0;
+}
+
 .margin-right-half {
 	margin-right: $margin-base / 2;
 }
@@ -52,6 +76,14 @@ $margin-base: 1rem;
 }
 
 // bottom
+.margin-bottom-auto {
+	margin-bottom: auto;
+}
+
+.margin-bottom-0 {
+	margin-bottom: 0;
+}
+
 .margin-bottom-half {
 	margin-bottom: $margin-base / 2;
 }
@@ -69,6 +101,14 @@ $margin-base: 1rem;
 }
 
 // left
+.margin-left-auto {
+	margin-left: auto;
+}
+
+.margin-left-0 {
+	margin-left: 0;
+}
+
 .margin-left-half {
 	margin-left: $margin-base / 2	;
 }
@@ -86,6 +126,16 @@ $margin-base: 1rem;
 }
 
 // x axis
+.margin-x-auto {
+	margin-right: auto;
+	margin-left: auto;
+}
+
+.margin-x-0 {
+	margin-right: 0;
+	margin-left: 0;
+}
+
 .margin-x-half {
 	margin-right: $margin-base / 2;
 	margin-left: $margin-base / 2;
@@ -107,6 +157,16 @@ $margin-base: 1rem;
 }
 
 // y axis
+.margin-y-auto {
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+.margin-y-0 {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
 .margin-y-half {
 	margin-top: $margin-base / 2;
 	margin-bottom: $margin-base / 2;

scss/_padding.scss

@@ -1,6 +1,10 @@
-$padding-base: 1rem;
+$padding-base: 1rem !default;
 
 // all sides
+.padding-0 {
+	padding: 0;
+}
+
 .padding-half {
 	padding: $padding-base / 2;
 }
@@ -18,6 +22,10 @@ $padding-base: 1rem;
 }
 
 // top
+.padding-top-0 {
+	padding-top: 0;
+}
+
 .padding-top-half {
 	padding-top: $padding-base / 2;
 }
@@ -35,6 +43,10 @@ $padding-base: 1rem;
 }
 
 // right
+.padding-right-0 {
+	padding-right: 0;
+}
+
 .padding-right-half {
 	padding-right: $padding-base / 2;
 }
@@ -52,6 +64,10 @@ $padding-base: 1rem;
 }
 
 // bottom
+.padding-bottom-0 {
+	padding-bottom: 0;
+}
+
 .padding-bottom-half {
 	padding-bottom: $padding-base / 2;
 }
@@ -69,6 +85,10 @@ $padding-base: 1rem;
 }
 
 // left
+.padding-left-0 {
+	padding-left: 0;
+}
+
 .padding-left-half {
 	padding-left: $padding-base / 2	;
 }
@@ -86,6 +106,11 @@ $padding-base: 1rem;
 }
 
 // x axis
+.padding-x-0 {
+	padding-right: 0;
+	padding-left: 0;
+}
+
 .padding-x-half {
 	padding-right: $padding-base / 2;
 	padding-left: $padding-base / 2;
@@ -107,6 +132,11 @@ $padding-base: 1rem;
 }
 
 // y axis
+.padding-y-0 {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
 .padding-y-half {
 	padding-top: $padding-base / 2;
 	padding-bottom: $padding-base / 2;