From 4e4b90a412230b25c8e1d4960a37524a124bbfe1 Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Sat, 20 Jul 2013 17:43:01 -0400
Subject: [PATCH 01/25] Shorthand Cleanup

---
 flex.scss | 39 +++------------------------------------
 1 file changed, 3 insertions(+), 36 deletions(-)

diff --git a/flex.scss b/flex.scss
index 25501b7..f143017 100644
--- a/flex.scss
+++ b/flex.scss
@@ -14,7 +14,7 @@
 	Basically this will use:
 		Fallback, old syntax (IE10, Safari, mobile webkit browsers)
 		Prefixed standard syntax (Chrome)
-		Final standards syntax (FF, Opera 12.1)
+		Final standards syntax (FF, IE11, Opera 12.1)
 
 	------------------------
 	This was inspired by: 
@@ -74,26 +74,7 @@
 
 	// Shorter version
 	@mixin flex-dir($value) {
-		@if $value == "row" { 
-			-webkit-box-direction: normal;
-			-webkit-box-orient: horizontal;
-		} @else if $value == "row-reverse" {
-			-webkit-box-direction: reverse;
-			-webkit-box-orient: horizontal;
-		} @else if $value == "column" {
-			-webkit-box-direction: normal;
-			-webkit-box-orient: vertical;
-		} @else if $value == "column-reverse" {
-			-webkit-box-direction: reverse;
-			-webkit-box-orient: vertical;
-		} @else {
-			-webkit-box-direction: normal;
-			-webkit-box-orient: horizontal;
-		}
-		-webkit-flex-direction: $value;
-		-moz-flex-direction: $value;
-		-ms-flex-direction: $value;
-		flex-direction: $value;
+		@include flex-direction($value)
 	}
 
 // Flexbox Wrap
@@ -204,21 +185,7 @@
 
 	// Shorter version
 	@mixin flex-just($value) {
-		@if $value == "flex-start" {
-			-webkit-box-pack: start;
-			-ms-flex-pack: start;
-		}
-		@else if $value == "flex-end" {
-			-webkit-box-pack: end;
-			-ms-flex-pack: end;
-		} 
-		@else { 
-			-webkit-box-pack: $value;
-			-ms-flex-pack: $value;
-		}
-		-webkit-justify-content: $value;
-		-moz-justify-content: $value;
-		justify-content: $value;
+		@include justify-content($value);
 	}
 
 // Flexbox Align Items

From 13553847eaf66a43924e04eacfd455dff454f8fc Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Sat, 20 Jul 2013 18:30:37 -0400
Subject: [PATCH 02/25] Readme adjusted

---
 README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0acca21..28a9921 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ browsers. For full support table check: http://caniuse.com/flexbox
 Basically this will use:
 - Fallback, old syntax (IE10, Safari, mobile webkit browsers)
 - Prefixed standard syntax (Chrome)
-- Final standards syntax (FF, Opera 12.1)
+- Final standards syntax (FF, IE11, Opera 12.1)
 
 ------------------------
 This was inspired by: 
@@ -14,4 +14,6 @@ This was inspired by:
 With help from: 
 - http://www.w3.org/TR/css3-flexbox/
 - http://the-echoplex.net/flexyboxes/
-- http://msdn.microsoft.com/en-us/library/ie/hh772069%28v=vs.85%29.aspx
\ No newline at end of file
+- http://msdn.microsoft.com/en-us/library/ie/hh772069%28v=vs.85%29.aspx
+
+A version compatible with Compass is provided by @trinonsense, on the compass branch.
\ No newline at end of file

From 219842ed8fccddaa31c0720d3ad8b6bfcafd0ea4 Mon Sep 17 00:00:00 2001
From: Sladex <xslade@gmail.com>
Date: Tue, 17 Sep 2013 17:47:08 +0600
Subject: [PATCH 03/25] flex-grow for old webkit syntax (Android Browser)

---
 flex.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/flex.scss b/flex.scss
index f143017..a9cd621 100644
--- a/flex.scss
+++ b/flex.scss
@@ -121,6 +121,7 @@
 // Default: 0
 
 @mixin flex-grow($int) {
+	-webkit-box-flex: $int;
 	-webkit-flex-grow: $int;
 	-moz-flex-grow: $int;
 	-ms-flex-positive: $int;
@@ -248,4 +249,4 @@
 		-ms-flex-line-pack: $value; 
 	}
 	align-content: $value;
-}
\ No newline at end of file
+}

From a77903fd835ccb0f8f803dddc9834bfe437f2e2b Mon Sep 17 00:00:00 2001
From: Jeffrey Kamo <kamojeffrey@gmail.com>
Date: Tue, 17 Sep 2013 18:28:51 -0700
Subject: [PATCH 04/25] Add fallback for justify-content(space-between)

This includes the "justify" property for Legacy and Microsoft flexbox syntax.
---
 flex.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/flex.scss b/flex.scss
index f143017..cd2efb9 100644
--- a/flex.scss
+++ b/flex.scss
@@ -173,7 +173,11 @@
 	@else if $value == "flex-end" {
 		-webkit-box-pack: end;
 		-ms-flex-pack: end;
-	} 
+	}
+	@else if $value == "space-between" {
+		-webkit-box-pack: justify;
+		-ms-flex-pack: justify;
+	}
 	@else { 
 		-webkit-box-pack: $value;
 		-ms-flex-pack: $value;
@@ -248,4 +252,4 @@
 		-ms-flex-line-pack: $value; 
 	}
 	align-content: $value;
-}
\ No newline at end of file
+}

From c016b112bf09f96c7994ff4ec942b4527e1eb6bc Mon Sep 17 00:00:00 2001
From: Micky Hulse <mickyhulse@gmail.com>
Date: Sat, 19 Oct 2013 22:54:34 -0700
Subject: [PATCH 05/25] Mixin defaults ...

Changes:

1. SCSS test file.
2. Added `.sass-cache*` to `.gitignore`.
3. Added mixin default args.
4. Cleaned up comments (wrapping to 72 characters).
5. Added property descriptions.
6. Added link to W3.org docs.
7. Slighty modified logic for a few `@if ...` directives.
---
 .gitignore       |   7 +
 flex.scss        | 309 +++++++++++++++++++++---------
 tests/tests.css  | 488 +++++++++++++++++++++++++++++++++++++++++++++++
 tests/tests.scss | 183 ++++++++++++++++++
 4 files changed, 893 insertions(+), 94 deletions(-)
 create mode 100644 tests/tests.css
 create mode 100644 tests/tests.scss

diff --git a/.gitignore b/.gitignore
index 5ebd21a..229965d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -161,3 +161,10 @@ pip-log.txt
 
 # Mac crap
 .DS_Store
+
+
+#############
+## SASS
+#############
+
+.sass-cache*
diff --git a/flex.scss b/flex.scss
index 0a1638b..4d8403c 100644
--- a/flex.scss
+++ b/flex.scss
@@ -1,33 +1,62 @@
-/*  ======== Flexbox Mixins ==============
-	------------------------
-	Copyright (c) 2013 Brian Franco
-	
-	Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-	The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-	------------------------
-
-	This is a set of mixins for those who want to mess
-	around with flexbox using the native support of current
-	browsers. For full support table check: http://caniuse.com/flexbox
-
-	Basically this will use:
-		Fallback, old syntax (IE10, Safari, mobile webkit browsers)
-		Prefixed standard syntax (Chrome)
-		Final standards syntax (FF, IE11, Opera 12.1)
-
-	------------------------
-	This was inspired by: 
-		http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
-	With help from: 
-		http://www.w3.org/TR/css3-flexbox/
-		http://the-echoplex.net/flexyboxes/
-		http://msdn.microsoft.com/en-us/library/ie/hh772069%28v=vs.85%29.aspx
-*/
-
-
-// Flexbox Inits
+// Flexbox Mixins
+// http://philipwalton.github.io/solved-by-flexbox/
+// https://github.com/philipwalton/solved-by-flexbox
+// 
+// Copyright (c) 2013 Brian Franco
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+// This is a set of mixins for those who want to mess around with flexbox
+// using the native support of current browsers. For full support table
+// check: http://caniuse.com/flexbox
+//
+// Basically this will use:
+//
+// * Fallback, old syntax (IE10, Safari, mobile webkit browsers)
+// * Prefixed standard syntax (Chrome)
+// * Final standards syntax (FF, IE11, Opera 12.1)
+//
+// This was inspired by:
+// 
+// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
+// 
+// With help from:
+// 
+// * http://w3.org/tr/css3-flexbox/
+// * http://the-echoplex.net/flexyboxes/
+// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
+// * http://css-tricks.com/using-flexbox/
+// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
+// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
+
+//----------------------------------------------------------------------
+
+// Flexbox Containers
+//
+// The 'flex' value causes an element to generate a block-level flex
+// container box.
+//
+// The 'inline-flex' value causes an element to generate a inline-level
+// flex container box. 
+//
 // display: flex | inline-flex
+//
+// http://w3.org/tr/css3-flexbox/#flex-containers
 
 @mixin flexbox {
 	display: -webkit-box;
@@ -37,6 +66,8 @@
 	display: flex;
 }
 
+//----------------------------------
+
 @mixin inline-flex {
 	display: -webkit-inline-box;
 	display: -webkit-inline-flex;
@@ -45,21 +76,27 @@
 	display: inline-flex;
 }
 
+//----------------------------------------------------------------------
+
 // Flexbox Direction
+//
+// The 'flex-direction' property specifies how flex items are placed in
+// the flex container, by setting the direction of the flex container's
+// main axis. This determines the direction that flex items are laid out in. 
+//
 // Values: row | row-reverse | column | column-reverse
 // Default: row
+//
+// http://w3.org/tr/css3-flexbox/#flex-direction-property
 
-@mixin flex-direction($value) {
-	@if $value == "row" { 
-		-webkit-box-direction: normal;
-		-webkit-box-orient: horizontal;
-	} @else if $value == "row-reverse" {
+@mixin flex-direction($value: row) {
+	@if $value == row-reverse {
 		-webkit-box-direction: reverse;
 		-webkit-box-orient: horizontal;
-	} @else if $value == "column" {
+	} @else if $value == column {
 		-webkit-box-direction: normal;
 		-webkit-box-orient: vertical;
-	} @else if $value == "column-reverse" {
+	} @else if $value == column-reverse {
 		-webkit-box-direction: reverse;
 		-webkit-box-orient: vertical;
 	} @else {
@@ -71,56 +108,86 @@
 	-ms-flex-direction: $value;
 	flex-direction: $value;
 }
+	// Shorter version:
+	@mixin flex-dir($value: false) { @include flex-direction($value); }
 
-	// Shorter version
-	@mixin flex-dir($value) {
-		@include flex-direction($value)
-	}
+//----------------------------------------------------------------------
 
 // Flexbox Wrap
-// Values: nowrap | wrap | wrap-reverse 
+//
+// The 'flex-wrap' property controls whether the flex container is single-line
+// or multi-line, and the direction of the cross-axis, which determines
+// the direction new lines are stacked in. 
+//
+// Values: nowrap | wrap | wrap-reverse
 // Default: nowrap
+//
+// http://w3.org/tr/css3-flexbox/#flex-wrap-property
 
-@mixin flex-wrap($value) {
-	// No Webkit Box fallback
+@mixin flex-wrap($value: nowrap) {
+	// No Webkit Box fallback.
 	-webkit-flex-wrap: $value;
 	-moz-flex-wrap: $value;
-	@if $value == "nowrap" {
+	@if $value == nowrap {
 		-ms-flex-wrap: none;
-	} 
-	@else { 
+	} @else { 
 		-ms-flex-wrap: $value; 
 	}
 	flex-wrap: $value;
 }
 
+//----------------------------------------------------------------------
+
 // Flexbox Flow (shorthand)
+//
+// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
+// and 'flex-wrap' properties, which together define the flex container's
+// main and cross axes.
+//
 // Values: <flex-direction> | <flex-wrap> 
 // Default: row nowrap
+//
+// http://w3.org/tr/css3-flexbox/#flex-flow-property
 
-@mixin flex-flow($values) {
-	// No Webkit Box fallback
+@mixin flex-flow($values: (row nowrap)) {
+	// No Webkit Box fallback.
 	-webkit-flex-flow: $values;
 	-moz-flex-flow: $values;
 	-ms-flex-flow: $values;
 	flex-flow: $values;
 }
 
+//----------------------------------------------------------------------
+
 // Flexbox Order
+//
+// The 'order' property controls the order in which flex items appear within
+// their flex container, by assigning them to ordinal groups.
+//
 // Default: 0
+//
+// http://w3.org/tr/css3-flexbox/#order-property
 
-@mixin order($int) {
-	-webkit-box-ordinal-group: $int+1;
+@mixin order($int: 0) {
+	-webkit-box-ordinal-group: $int + 1;
 	-webkit-order: $int;
 	-moz-order: $int;
 	-ms-flex-order: $int;
 	order: $int;
 }
 
+//----------------------------------------------------------------------
+
 // Flexbox Grow
+//
+// The 'flex-grow' property sets the flex grow factor. Negative numbers
+// are invalid.
+//
 // Default: 0
+//
+// http://w3.org/tr/css3-flexbox/#flex-grow-property
 
-@mixin flex-grow($int) {
+@mixin flex-grow($int: 0) {
 	-webkit-box-flex: $int;
 	-webkit-flex-grow: $int;
 	-moz-flex-grow: $int;
@@ -128,58 +195,95 @@
 	flex-grow: $int;
 }
 
-// Flexbox Shrink 
+//----------------------------------------------------------------------
+
+// Flexbox Shrink
+//
+// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
+// are invalid.
+//
 // Default: 1
+//
+// http://w3.org/tr/css3-flexbox/#flex-shrink-property
 
-@mixin flex-shrink($int) {
+@mixin flex-shrink($int: 1) {
 	-webkit-flex-shrink: $int;
 	-moz-flex-shrink: $int;
 	-ms-flex-negative: $int;
 	flex-shrink: $int;
 }
 
+//----------------------------------------------------------------------
+
 // Flexbox Basis
+//
+// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. 
+//
 // Values: Like "width" 
 // Default: auto
+//
+// http://w3.org/tr/css3-flexbox/#flex-shrink-property
 
-@mixin flex-basis($value) {
+@mixin flex-basis($value: auto) {
 	-webkit-flex-basis: $value;
 	-moz-flex-basis: $value;
 	-ms-flex-preferred-size: $value;
 	flex-basis: $value;
 }
 
-// Flexbox "Flex" (shorthand)
-// Values: <flex-grow> <flex-shrink> || <flex-basis>
-// Default: 0 1 auto
+//----------------------------------------------------------------------
 
-@mixin flex($fg, $fs, $fb) {
+// Flexbox "Flex" (shorthand)
+//
+// The 'flex' property specifies the components of a flexible length: the
+// flex grow factor and flex shrink factor, and the flex basis. When an
+// element is a flex item, 'flex' is consulted instead of the main size
+// property to determine the main size of the element. If an element is
+// not a flex item, 'flex' has no effect.
+//
+// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
+// Default: See individual properties (1 1 0).
+//
+// http://w3.org/tr/css3-flexbox/#flex-property
+
+@mixin flex($fg: 1, $fs: null, $fb: null) {
 	-webkit-box-flex: $fg;
 	-webkit-flex: $fg $fs $fb;
+	-moz-box-flex: $fg;
 	-moz-flex: $fg $fs $fb;
 	-ms-flex: $fg $fs $fb;
 	flex: $fg $fs $fb;
 }
 
+//----------------------------------------------------------------------
+
 // Flexbox Justify Content
+//
+// The 'justify-content' property aligns flex items along the main axis
+// of the current line of the flex container. This is done after any flexible
+// lengths and any auto margins have been resolved. Typically it helps distribute
+// extra free space leftover when either all the flex items on a line are
+// inflexible, or are flexible but have reached their maximum size. It also
+// exerts some control over the alignment of items when they overflow the line.
+//
+// Note: 'space-*' values not supported in older syntaxes.
+//
 // Values: flex-start | flex-end | center | space-between | space-around
 // Default: flex-start
-// (space-* values not supported in older syntaxes)
+//
+// http://w3.org/tr/css3-flexbox/#justify-content-property
 
-@mixin justify-content($value) {
-	@if $value == "flex-start" {
+@mixin justify-content($value: flex-start) {
+	@if $value == flex-start {
 		-webkit-box-pack: start;
 		-ms-flex-pack: start;
-	}
-	@else if $value == "flex-end" {
+	} @else if $value == flex-end {
 		-webkit-box-pack: end;
 		-ms-flex-pack: end;
-	}
-	@else if $value == "space-between" {
+	} @else if $value == space-between {
 		-webkit-box-pack: justify;
 		-ms-flex-pack: justify;
-	}
-	@else { 
+	} @else {
 		-webkit-box-pack: $value;
 		-ms-flex-pack: $value;
 	}
@@ -187,27 +291,35 @@
 	-moz-justify-content: $value;
 	justify-content: $value;
 }
+	// Shorter version:
+	@mixin flex-just($value: flex-start) { @include justify-content($value); }
 
-	// Shorter version
-	@mixin flex-just($value) {
-		@include justify-content($value);
-	}
+//----------------------------------------------------------------------
 
 // Flexbox Align Items
+//
+// Flex items can be aligned in the cross axis of the current line of the
+// flex container, similar to 'justify-content' but in the perpendicular
+// direction. 'align-items' sets the default alignment for all of the flex
+// container's items, including anonymous flex items. 'align-self' allows
+// this default alignment to be overridden for individual flex items. (For
+// anonymous flex items, 'align-self' always matches the value of 'align-items'
+// on their associated flex container.) 
+//
 // Values: flex-start | flex-end | center | baseline | stretch
 // Default: stretch
+//
+// http://w3.org/tr/css3-flexbox/#align-items-property
 
-@mixin align-items($value) {
-	@if $value == "flex-start" {
+@mixin align-items($value: stretch) {
+	@if $value == flex-start {
 		-webkit-box-align: start;
 		-ms-flex-align: start;
-	}
-	@else if $value == "flex-end" {
+	} @else if $value == flex-end {
 		-webkit-box-align: end;
 		-ms-flex-align: end;
-	} 
-	@else { 
-		-webkit-box-align: $value; 
+	} @else {
+		-webkit-box-align: $value;
 		-ms-flex-align: $value;
 	}
 	-webkit-align-items: $value;
@@ -215,42 +327,51 @@
 	align-items: $value;
 }
 
+//----------------------------------
+
 // Flexbox Align Self
+//
 // Values: auto | flex-start | flex-end | center | baseline | stretch
 // Default: auto
 
-@mixin align-self($value) {
-	// No Webkit Box Fallback
+@mixin align-self($value: auto) {
+	// No Webkit Box Fallback.
 	-webkit-align-self: $value;
 	-moz-align-self: $value;
-	@if $value == "flex-start" {
+	@if $value == flex-start {
 		-ms-flex-item-align: start;
-	}
-	@else if $value == "flex-end" {
+	} @else if $value == flex-end {
 		-ms-flex-item-align: end;
-	} 
-	@else { 
-		-ms-flex-item-align: $value; 
+	} @else {
+		-ms-flex-item-align: $value;
 	}
 	align-self: $value;
 }
 
+//----------------------------------------------------------------------
+
 // Flexbox Align Content
+//
+// The 'align-content' property aligns a flex container's lines within the
+// flex container when there is extra space in the cross-axis, similar to
+// how 'justify-content' aligns individual items within the main-axis. Note,
+// this property has no effect when the flexbox has only a single line.
+//
 // Values: flex-start | flex-end | center | space-between | space-around | stretch
 // Default: stretch
+//
+// http://w3.org/tr/css3-flexbox/#align-content-property
 
-@mixin align-content($value) {
-	// No Webkit Box Fallback
+@mixin align-content($value: stretch) {
+	// No Webkit Box Fallback.
 	-webkit-align-content: $value;
 	-moz-align-content: $value;
-	@if $value == "flex-start" {
+	@if $value == flex-start {
 		-ms-flex-line-pack: start;
-	}
-	@else if $value == "flex-end" {
+	} @else if $value == flex-end {
 		-ms-flex-line-pack: end;
-	} 
-	@else { 
-		-ms-flex-line-pack: $value; 
+	} @else {
+		-ms-flex-line-pack: $value;
 	}
 	align-content: $value;
 }
diff --git a/tests/tests.css b/tests/tests.css
new file mode 100644
index 0000000..6955368
--- /dev/null
+++ b/tests/tests.css
@@ -0,0 +1,488 @@
+/* TEST FILE ONLY! NOT INTEDED FOR USE IN REAL-WORLD! */
+/*--------------------------------------------------------------------*/
+.flexbox {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.flexbox-inline {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex; }
+
+/*--------------------------------------------------------------------*/
+.flex-direction-A {
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row; }
+
+.flex-dir-A {
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: false;
+  -moz-flex-direction: false;
+  -ms-flex-direction: false;
+  flex-direction: false; }
+
+/* row */
+.flex-direction-B {
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row; }
+
+.flex-dir-B {
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row; }
+
+/* row-reverse */
+.flex-direction-C {
+  -webkit-box-direction: reverse;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: row-reverse;
+  -moz-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse; }
+
+.flex-dir-C {
+  -webkit-box-direction: reverse;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: row-reverse;
+  -moz-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse; }
+
+/* column */
+.flex-direction-D {
+  -webkit-box-direction: normal;
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column; }
+
+.flex-dir-D {
+  -webkit-box-direction: normal;
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column; }
+
+/* column-reverse */
+.flex-direction-E {
+  -webkit-box-direction: reverse;
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column-reverse;
+  -moz-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse; }
+
+.flex-dir-E {
+  -webkit-box-direction: reverse;
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column-reverse;
+  -moz-flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+  flex-direction: column-reverse; }
+
+/*--------------------------------------------------------------------*/
+.flex-wrap-A {
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: none;
+  flex-wrap: nowrap; }
+
+/* nowrap */
+.flex-wrap-B {
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: none;
+  flex-wrap: nowrap; }
+
+/* nowrap */
+.flex-wrap-C {
+  -webkit-flex-wrap: wrap;
+  -moz-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap; }
+
+/* nowrap */
+.flex-wrap-D {
+  -webkit-flex-wrap: wrap-reverse;
+  -moz-flex-wrap: wrap-reverse;
+  -ms-flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse; }
+
+/*--------------------------------------------------------------------*/
+.flex-flow-A {
+  -webkit-flex-flow: row nowrap;
+  -moz-flex-flow: row nowrap;
+  -ms-flex-flow: row nowrap;
+  flex-flow: row nowrap; }
+
+/* row nowrap */
+.flex-flow-B {
+  -webkit-flex-flow: row nowrap;
+  -moz-flex-flow: row nowrap;
+  -ms-flex-flow: row nowrap;
+  flex-flow: row nowrap; }
+
+/* column-reverse wrap */
+.flex-flow-C {
+  -webkit-flex-flow: column-reverse wrap;
+  -moz-flex-flow: column-reverse wrap;
+  -ms-flex-flow: column-reverse wrap;
+  flex-flow: column-reverse wrap; }
+
+/*--------------------------------------------------------------------*/
+.order-A {
+  -webkit-box-ordinal-group: 1;
+  -webkit-order: 0;
+  -moz-order: 0;
+  -ms-flex-order: 0;
+  order: 0; }
+
+/* -1 */
+.order-B {
+  -webkit-box-ordinal-group: 0;
+  -webkit-order: -1;
+  -moz-order: -1;
+  -ms-flex-order: -1;
+  order: -1; }
+
+/* 5 */
+.order-C {
+  -webkit-box-ordinal-group: 6;
+  -webkit-order: 5;
+  -moz-order: 5;
+  -ms-flex-order: 5;
+  order: 5; }
+
+/*--------------------------------------------------------------------*/
+.flex-grow-A {
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -moz-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0; }
+
+/* 3 */
+.flex-grow-B {
+  -webkit-box-flex: 3;
+  -webkit-flex-grow: 3;
+  -moz-flex-grow: 3;
+  -ms-flex-positive: 3;
+  flex-grow: 3; }
+
+/*--------------------------------------------------------------------*/
+.flex-shrink-A {
+  -webkit-flex-shrink: 1;
+  -moz-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1; }
+
+/* 2 */
+.flex-shrink-B {
+  -webkit-flex-shrink: 2;
+  -moz-flex-shrink: 2;
+  -ms-flex-negative: 2;
+  flex-shrink: 2; }
+
+/*--------------------------------------------------------------------*/
+.flex-basis-A {
+  -webkit-flex-basis: auto;
+  -moz-flex-basis: auto;
+  -ms-flex-preferred-size: auto;
+  flex-basis: auto; }
+
+.flex-basis-B {
+  -webkit-flex-basis: 18rem;
+  -moz-flex-basis: 18rem;
+  -ms-flex-preferred-size: 18rem;
+  flex-basis: 18rem; }
+
+/*--------------------------------------------------------------------*/
+.flex-A {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1; }
+
+/* 1, 6, 20% */
+.flex-B {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 6 20%;
+  -moz-box-flex: 1;
+  -moz-flex: 1 6 20%;
+  -ms-flex: 1 6 20%;
+  flex: 1 6 20%; }
+
+/* 1, 20%, null */
+.flex-C {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 20%;
+  -moz-box-flex: 1;
+  -moz-flex: 1 20%;
+  -ms-flex: 1 20%;
+  flex: 1 20%; }
+
+/* 1, null, null */
+.flex-D {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1; }
+
+/*--------------------------------------------------------------------*/
+.justify-content-A {
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  -moz-justify-content: flex-start;
+  justify-content: flex-start; }
+
+.flex-just-A {
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  -moz-justify-content: flex-start;
+  justify-content: flex-start; }
+
+/* flex-start */
+.justify-content-B {
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  -moz-justify-content: flex-start;
+  justify-content: flex-start; }
+
+.flex-just-B {
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  -moz-justify-content: flex-start;
+  justify-content: flex-start; }
+
+/* flex-end */
+.justify-content-C {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  -moz-justify-content: flex-end;
+  justify-content: flex-end; }
+
+.flex-just-C {
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  -webkit-justify-content: flex-end;
+  -moz-justify-content: flex-end;
+  justify-content: flex-end; }
+
+/* flex-end */
+.justify-content-D {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  justify-content: center; }
+
+.flex-just-D {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  justify-content: center; }
+
+/* space-between */
+.justify-content-E {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  -moz-justify-content: space-between;
+  justify-content: space-between; }
+
+.flex-just-E {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  -moz-justify-content: space-between;
+  justify-content: space-between; }
+
+/* space-around */
+.justify-content-E {
+  -webkit-box-pack: space-around;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: space-around;
+  -moz-justify-content: space-around;
+  justify-content: space-around; }
+
+.flex-just-E {
+  -webkit-box-pack: space-around;
+  -ms-flex-pack: space-around;
+  -webkit-justify-content: space-around;
+  -moz-justify-content: space-around;
+  justify-content: space-around; }
+
+/*--------------------------------------------------------------------*/
+.align-items-A {
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  align-items: stretch; }
+
+/* flex-start */
+.align-items-C {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  -webkit-align-items: flex-start;
+  -moz-align-items: flex-start;
+  align-items: flex-start; }
+
+/* flex-end */
+.align-items-D {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  -webkit-align-items: flex-end;
+  -moz-align-items: flex-end;
+  align-items: flex-end; }
+
+/* center */
+.align-items-E {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  -moz-align-items: center;
+  align-items: center; }
+
+/* baseline */
+.align-items-F {
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  -webkit-align-items: baseline;
+  -moz-align-items: baseline;
+  align-items: baseline; }
+
+/* stretch */
+.align-items-G {
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  align-items: stretch; }
+
+/*--------------------------------*/
+.align-self-A {
+  -webkit-align-self: auto;
+  -moz-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto; }
+
+/* auto */
+.align-self-B {
+  -webkit-align-self: auto;
+  -moz-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto; }
+
+/* flex-start */
+.align-self-C {
+  -webkit-align-self: flex-start;
+  -moz-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start; }
+
+/* flex-end */
+.align-self-D {
+  -webkit-align-self: flex-end;
+  -moz-align-self: flex-end;
+  -ms-flex-item-align: end;
+  align-self: flex-end; }
+
+/* center */
+.align-self-E {
+  -webkit-align-self: center;
+  -moz-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center; }
+
+/* baseline */
+.align-self-F {
+  -webkit-align-self: baseline;
+  -moz-align-self: baseline;
+  -ms-flex-item-align: baseline;
+  align-self: baseline; }
+
+/* stretch */
+.align-self-G {
+  -webkit-align-self: stretch;
+  -moz-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch; }
+
+/*--------------------------------------------------------------------*/
+.align-content-A {
+  -webkit-align-content: stretch;
+  -moz-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch; }
+
+/* flex-start */
+.align-content-B {
+  -webkit-align-content: flex-start;
+  -moz-align-content: flex-start;
+  -ms-flex-line-pack: start;
+  align-content: flex-start; }
+
+/* flex-end */
+.align-content-C {
+  -webkit-align-content: flex-end;
+  -moz-align-content: flex-end;
+  -ms-flex-line-pack: end;
+  align-content: flex-end; }
+
+/* center */
+.align-content-D {
+  -webkit-align-content: center;
+  -moz-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center; }
+
+/* space-between */
+.align-content-E {
+  -webkit-align-content: space-between;
+  -moz-align-content: space-between;
+  -ms-flex-line-pack: space-between;
+  align-content: space-between; }
+
+/* space-around */
+.align-content-F {
+  -webkit-align-content: space-around;
+  -moz-align-content: space-around;
+  -ms-flex-line-pack: space-around;
+  align-content: space-around; }
+
+/* stretch */
+.align-content-G {
+  -webkit-align-content: stretch;
+  -moz-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch; }
diff --git a/tests/tests.scss b/tests/tests.scss
new file mode 100644
index 0000000..e273730
--- /dev/null
+++ b/tests/tests.scss
@@ -0,0 +1,183 @@
+/* TEST FILE ONLY! NOT INTEDED FOR USE IN REAL-WORLD! */
+
+@import "../flex";
+
+/*--------------------------------------------------------------------*/
+
+.flexbox { @include flexbox; }
+.flexbox-inline { @include inline-flex; }
+
+/*--------------------------------------------------------------------*/
+
+.flex-direction-A { @include flex-direction; }
+.flex-dir-A { @include flex-dir; }
+
+/* row */
+.flex-direction-B { @include flex-direction(row); }
+.flex-dir-B { @include flex-dir(row); }
+
+/* row-reverse */
+.flex-direction-C { @include flex-direction(row-reverse); }
+.flex-dir-C { @include flex-dir(row-reverse); }
+
+/* column */
+.flex-direction-D { @include flex-direction(column); }
+.flex-dir-D { @include flex-dir(column); }
+
+/* column-reverse */
+.flex-direction-E { @include flex-direction(column-reverse); }
+.flex-dir-E { @include flex-dir(column-reverse); }
+
+/*--------------------------------------------------------------------*/
+
+.flex-wrap-A { @include flex-wrap; }
+
+/* nowrap */
+.flex-wrap-B { @include flex-wrap(nowrap); }
+
+/* nowrap */
+.flex-wrap-C { @include flex-wrap(wrap); }
+
+/* nowrap */
+.flex-wrap-D { @include flex-wrap(wrap-reverse); }
+
+/*--------------------------------------------------------------------*/
+
+.flex-flow-A { @include flex-flow; }
+
+/* row nowrap */
+.flex-flow-B { @include flex-flow(row nowrap); }
+
+/* column-reverse wrap */
+.flex-flow-C { @include flex-flow(column-reverse wrap); }
+
+/*--------------------------------------------------------------------*/
+
+.order-A { @include order; }
+
+/* -1 */
+.order-B { @include order(-1); }
+
+/* 5 */
+.order-C { @include order(5); }
+
+/*--------------------------------------------------------------------*/
+
+.flex-grow-A { @include flex-grow; }
+
+/* 3 */
+.flex-grow-B { @include flex-grow(3); }
+
+/*--------------------------------------------------------------------*/
+
+.flex-shrink-A { @include flex-shrink; }
+
+/* 2 */
+.flex-shrink-B { @include flex-shrink(2); }
+
+/*--------------------------------------------------------------------*/
+
+.flex-basis-A { @include flex-basis; }
+
+.flex-basis-B { @include flex-basis(18rem); }
+
+/*--------------------------------------------------------------------*/
+
+.flex-A { @include flex; }
+
+/* 1, 6, 20% */
+.flex-B { @include flex(1, 6, 20%); }
+
+/* 1, 20%, null */
+.flex-C { @include flex(1, 20%); }
+
+/* 1, null, null */
+.flex-D { @include flex(1); }
+
+/*--------------------------------------------------------------------*/
+
+.justify-content-A { @include justify-content; }
+.flex-just-A { @include flex-just; }
+
+/* flex-start */
+.justify-content-B { @include justify-content(flex-start); }
+.flex-just-B { @include flex-just(flex-start); }
+
+/* flex-end */
+.justify-content-C { @include justify-content(flex-end); }
+.flex-just-C { @include flex-just(flex-end); }
+
+/* flex-end */
+.justify-content-D { @include justify-content(center); }
+.flex-just-D { @include flex-just(center); }
+
+/* space-between */
+.justify-content-E { @include justify-content(space-between); }
+.flex-just-E { @include flex-just(space-between); }
+
+/* space-around */
+.justify-content-E { @include justify-content(space-around); }
+.flex-just-E { @include flex-just(space-around); }
+
+/*--------------------------------------------------------------------*/
+
+.align-items-A { @include align-items; }
+
+/* flex-start */
+.align-items-C { @include align-items(flex-start); }
+
+/* flex-end */
+.align-items-D { @include align-items(flex-end); }
+
+/* center */
+.align-items-E { @include align-items(center); }
+
+/* baseline */
+.align-items-F { @include align-items(baseline); }
+
+/* stretch */
+.align-items-G { @include align-items(stretch); }
+
+/*--------------------------------*/
+
+.align-self-A { @include align-self; }
+
+/* auto */
+.align-self-B { @include align-self(auto); }
+
+/* flex-start */
+.align-self-C { @include align-self(flex-start); }
+
+/* flex-end */
+.align-self-D { @include align-self(flex-end); }
+
+/* center */
+.align-self-E { @include align-self(center); }
+
+/* baseline */
+.align-self-F { @include align-self(baseline); }
+
+/* stretch */
+.align-self-G { @include align-self(stretch); }
+
+/*--------------------------------------------------------------------*/
+
+.align-content-A { @include align-content; }
+
+/* flex-start */
+.align-content-B { @include align-content(flex-start); }
+
+/* flex-end */
+.align-content-C { @include align-content(flex-end); }
+
+/* center */
+.align-content-D { @include align-content(center); }
+
+/* space-between */
+.align-content-E { @include align-content(space-between); }
+
+/* space-around */
+.align-content-F { @include align-content(space-around); }
+
+/* stretch */
+.align-content-G { @include align-content(stretch); }

From e95e07f2491a60675a575205965234632fa93942 Mon Sep 17 00:00:00 2001
From: "T.J. Fogarty" <fogarty.tj@gmail.com>
Date: Fri, 3 Jan 2014 11:56:29 +0000
Subject: [PATCH 06/25] Change flexbox and inline-flex to a class

Changing flexbox and inline-flex from a mixin to a class should produce less CSS when compiled.
---
 flex.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flex.scss b/flex.scss
index 4d8403c..c599917 100644
--- a/flex.scss
+++ b/flex.scss
@@ -58,7 +58,7 @@
 //
 // http://w3.org/tr/css3-flexbox/#flex-containers
 
-@mixin flexbox {
+%flexbox {
 	display: -webkit-box;
 	display: -webkit-flex;
 	display: -moz-flex;
@@ -68,7 +68,7 @@
 
 //----------------------------------
 
-@mixin inline-flex {
+%inline-flex {
 	display: -webkit-inline-box;
 	display: -webkit-inline-flex;
 	display: -moz-inline-flex;

From 084957b7dd14fa2b270c874f3b28bc03acfc1af4 Mon Sep 17 00:00:00 2001
From: "T.J. Fogarty" <fogarty.tj@gmail.com>
Date: Fri, 3 Jan 2014 11:57:17 +0000
Subject: [PATCH 07/25] Update tests.scss to reflect core changes

Using @extend rather than calling a mixin.
---
 tests/tests.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/tests.scss b/tests/tests.scss
index e273730..2b0a47c 100644
--- a/tests/tests.scss
+++ b/tests/tests.scss
@@ -4,8 +4,8 @@
 
 /*--------------------------------------------------------------------*/
 
-.flexbox { @include flexbox; }
-.flexbox-inline { @include inline-flex; }
+.flexbox { @extend %flexbox; }
+.flexbox-inline { @extend %inline-flex; }
 
 /*--------------------------------------------------------------------*/
 

From 8f6698e22caa5d6310444dcb5276328e043689f3 Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Fri, 10 Jan 2014 15:23:45 -0500
Subject: [PATCH 08/25] Placeholder + Mixin Harmony

Revert to mixins, but add placeholders too.
---
 flex.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/flex.scss b/flex.scss
index c599917..8b8b0f5 100644
--- a/flex.scss
+++ b/flex.scss
@@ -57,8 +57,10 @@
 // display: flex | inline-flex
 //
 // http://w3.org/tr/css3-flexbox/#flex-containers
+//
+// (Placeholder selectors for each type, for those who rather @extend)
 
-%flexbox {
+@mixin flexbox {
 	display: -webkit-box;
 	display: -webkit-flex;
 	display: -moz-flex;
@@ -66,9 +68,11 @@
 	display: flex;
 }
 
+%flexbox { @include flexbox; }
+
 //----------------------------------
 
-%inline-flex {
+@mixin inline-flex {
 	display: -webkit-inline-box;
 	display: -webkit-inline-flex;
 	display: -moz-inline-flex;
@@ -76,6 +80,8 @@
 	display: inline-flex;
 }
 
+%inline-flex { @include inline-flex; }
+
 //----------------------------------------------------------------------
 
 // Flexbox Direction

From 551dc9f9eb11f0ccdda331915397721c75387a97 Mon Sep 17 00:00:00 2001
From: Will Soto <paradox41@users.noreply.github.com>
Date: Mon, 27 Jan 2014 09:39:57 -0500
Subject: [PATCH 09/25] Fixed the reference url for flex-basis

---
 flex.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flex.scss b/flex.scss
index 8b8b0f5..0fa9eb0 100644
--- a/flex.scss
+++ b/flex.scss
@@ -228,7 +228,7 @@
 // Values: Like "width" 
 // Default: auto
 //
-// http://w3.org/tr/css3-flexbox/#flex-shrink-property
+// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
 
 @mixin flex-basis($value: auto) {
 	-webkit-flex-basis: $value;

From 05773cbef617c80ac915a4fb2f2af05e7f016fcb Mon Sep 17 00:00:00 2001
From: Kyle Peatt <kpeatt@gmail.com>
Date: Fri, 14 Mar 2014 13:34:21 -0700
Subject: [PATCH 10/25] Check if the argument passed to flex() is a list and
 return the right value for -webkit-box-flex. Fixes #10.

---
 flex.scss | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/flex.scss b/flex.scss
index 0fa9eb0..62ae02a 100644
--- a/flex.scss
+++ b/flex.scss
@@ -253,7 +253,18 @@
 // http://w3.org/tr/css3-flexbox/#flex-property
 
 @mixin flex($fg: 1, $fs: null, $fb: null) {
-	-webkit-box-flex: $fg;
+
+	// Box-Flex only supports a flex-grow value so let's grab the
+	// first item in the list and just return that.
+	@if type-of($fg) == 'list' {
+		$fg: nth($fg, 1);
+		-webkit-box-flex: $fg;
+	}
+	// If the user wrote their include properly, just return the right value.
+	@else {
+		-webkit-box-flex: $fg;
+	}
+
 	-webkit-flex: $fg $fs $fb;
 	-moz-box-flex: $fg;
 	-moz-flex: $fg $fs $fb;

From 7543277a2536c7662d74368284dbba6887f39be7 Mon Sep 17 00:00:00 2001
From: Jeffrey Kamo <kamojeffrey@gmail.com>
Date: Fri, 14 Mar 2014 18:37:57 -0700
Subject: [PATCH 11/25] Update @mixin flex() to accomodate box-flex

So the previous pull request #11 was actually broken.

The output of `@mixin flex()` when given a list wasn't filling out all the properties correctly.

This PR should fix that, and ensure that all box-flex properties are filled out appropriately too!

Now both, for example, `@include flex(10, 5, 100px)` and `@include flex(10 5 100px)` work!
---
 flex.scss | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/flex.scss b/flex.scss
index 62ae02a..d6e5d11 100644
--- a/flex.scss
+++ b/flex.scss
@@ -253,20 +253,19 @@
 // http://w3.org/tr/css3-flexbox/#flex-property
 
 @mixin flex($fg: 1, $fs: null, $fb: null) {
+    
+	// Set a variable to be used by box-flex properties
+	$fg-boxflex: $fg;
 
 	// Box-Flex only supports a flex-grow value so let's grab the
 	// first item in the list and just return that.
 	@if type-of($fg) == 'list' {
-		$fg: nth($fg, 1);
-		-webkit-box-flex: $fg;
-	}
-	// If the user wrote their include properly, just return the right value.
-	@else {
-		-webkit-box-flex: $fg;
+		$fg-boxflex: nth($fg, 1);
 	}
 
+	-webkit-box-flex: $fg-boxflex;
 	-webkit-flex: $fg $fs $fb;
-	-moz-box-flex: $fg;
+	-moz-box-flex: $fg-boxflex;
 	-moz-flex: $fg $fs $fb;
 	-ms-flex: $fg $fs $fb;
 	flex: $fg $fs $fb;

From a6716d49326f5e96aa72942fdff694313a3ed25a Mon Sep 17 00:00:00 2001
From: Renzo Sartorius <renzo.sartorius@arkasis.nl>
Date: Fri, 11 Jul 2014 13:59:04 +0200
Subject: [PATCH 12/25] justify content: space-around IE10 fix

IE10 uses the (as far as I could find) undocumented -ms-flex-pack: distribute; for the space-around value. Could find no similar implementation of the old flexbox spec by other vendors.
---
 flex.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/flex.scss b/flex.scss
index d6e5d11..c1ffb77 100644
--- a/flex.scss
+++ b/flex.scss
@@ -299,6 +299,8 @@
 	} @else if $value == space-between {
 		-webkit-box-pack: justify;
 		-ms-flex-pack: justify;
+	} @else if $value == space-around {
+		-ms-flex-pack: distribute;		
 	} @else {
 		-webkit-box-pack: $value;
 		-ms-flex-pack: $value;

From 43d947a924cba48fa1f3265f80066815c63bfdca Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Mon, 27 Oct 2014 16:32:20 -0400
Subject: [PATCH 13/25] Simpler aliasing

Fixes #15
Fixes #16
---
 flex.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flex.scss b/flex.scss
index c1ffb77..7ac6af2 100644
--- a/flex.scss
+++ b/flex.scss
@@ -115,7 +115,7 @@
 	flex-direction: $value;
 }
 	// Shorter version:
-	@mixin flex-dir($value: false) { @include flex-direction($value); }
+	@mixin flex-dir($args...) { @include flex-direction($args...); }
 
 //----------------------------------------------------------------------
 
@@ -310,7 +310,7 @@
 	justify-content: $value;
 }
 	// Shorter version:
-	@mixin flex-just($value: flex-start) { @include justify-content($value); }
+	@mixin flex-just($args...) { @include justify-content($args...); }
 
 //----------------------------------------------------------------------
 

From 9d252ff093e4ba157a28edbf3ee22bb39b4ad32b Mon Sep 17 00:00:00 2001
From: Michael Hulse <mhulse@users.noreply.github.com>
Date: Fri, 21 Nov 2014 01:09:29 -0800
Subject: [PATCH 14/25] Added bower.json file.

Note: You will have to make a tag/release that matches the version number in this bower.json file. For discussion, see #17.
---
 bower.json | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 bower.json

diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..3417018
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,19 @@
+{
+  "name": "sass-flex-mixin",
+  "version": "1.0.0",
+  "main": [
+    "flex.scss"
+  ],
+  "ignore": [
+    "tests",
+    "**/.*",
+    "**/*.md",
+    "**/*.json"
+  ],
+  "dependencies": {},
+  "devDependencies": {},
+  "keywords": [
+    "sass",
+    "css"
+  ]
+}

From 3d02ac2961d0047657d935cebe642b81fc06eb65 Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Wed, 14 Jan 2015 09:50:10 -0500
Subject: [PATCH 15/25] Fixes #19 - License Info

---
 LICENSE.md | 19 +++++++++++++++++++
 README.md  |  4 +++-
 bower.json |  1 +
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 LICENSE.md

diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..9d945b2
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,19 @@
+Copyright (c) 2015 Brian Franco
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
index 28a9921..376a416 100644
--- a/README.md
+++ b/README.md
@@ -16,4 +16,6 @@ With help from:
 - http://the-echoplex.net/flexyboxes/
 - http://msdn.microsoft.com/en-us/library/ie/hh772069%28v=vs.85%29.aspx
 
-A version compatible with Compass is provided by @trinonsense, on the compass branch.
\ No newline at end of file
+A version compatible with Compass is provided by @trinonsense, on the compass branch.
+
+Licensed under MIT.
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 3417018..d6ca2b4 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,7 @@
 {
   "name": "sass-flex-mixin",
   "version": "1.0.0",
+  "license" : MIT,
   "main": [
     "flex.scss"
   ],

From d8046ef98aeddb5c3869c409755bcb3e213f1113 Mon Sep 17 00:00:00 2001
From: Michiel Sikma <michiel@privax.com>
Date: Mon, 26 Jan 2015 17:29:40 +0000
Subject: [PATCH 16/25] Added package.json for npm

---
 package.json | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 package.json

diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e973fc4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "sass-flex-mixin",
+  "version": "1.0.0",
+  "description": "Set of mixins for cross-browser compatible flexbox",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mastastealth/sass-flex-mixin.git"
+  },
+  "keywords": [
+    "sass",
+    "css",
+    "flexbox"
+  ],
+  "author": "Michiel Sikma <michiel@sikma.org> (http://michielsikma.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mastastealth/sass-flex-mixin/issues"
+  },
+  "homepage": "https://github.com/mastastealth/sass-flex-mixin"
+}

From 2192f9e202e0d731918e6b1461514cd7514f64ef Mon Sep 17 00:00:00 2001
From: Michiel Sikma <michiel@privax.com>
Date: Mon, 26 Jan 2015 17:31:00 +0000
Subject: [PATCH 17/25] Put the proper author name in the package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e973fc4..4c2029b 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "css",
     "flexbox"
   ],
-  "author": "Michiel Sikma <michiel@sikma.org> (http://michielsikma.com/)",
+  "author": "Brian Franco <hi@brianfran.co> (http://brianfran.co/)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/mastastealth/sass-flex-mixin/issues"

From 1cdef0fe80d6df1686f9543ad79f7acb142763f1 Mon Sep 17 00:00:00 2001
From: Mhretab Kidane <mhretab@users.noreply.github.com>
Date: Thu, 19 Feb 2015 14:14:27 +0100
Subject: [PATCH 18/25] added quotes to license MIT

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index d6ca2b4..525076d 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "sass-flex-mixin",
   "version": "1.0.0",
-  "license" : MIT,
+  "license" : "MIT",
   "main": [
     "flex.scss"
   ],

From 4da9f6fd660c711f1cab75c642a50eef0600445a Mon Sep 17 00:00:00 2001
From: Mhretab Kidane <mhretab@users.noreply.github.com>
Date: Sat, 21 Feb 2015 18:07:39 +0100
Subject: [PATCH 19/25] added bower installation guide to the read me file

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 376a416..9271e77 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+## Sass flexbox mixin
 This is a set of mixins for those who want to mess
 around with flexbox using the native support of current
 browsers. For full support table check: http://caniuse.com/flexbox
@@ -7,6 +8,11 @@ Basically this will use:
 - Prefixed standard syntax (Chrome)
 - Final standards syntax (FF, IE11, Opera 12.1)
 
+## Installation
+#### Bower
+
+`bower install sass-flex-mixin`
+
 ------------------------
 This was inspired by: 
 - http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
@@ -18,4 +24,4 @@ With help from:
 
 A version compatible with Compass is provided by @trinonsense, on the compass branch.
 
-Licensed under MIT.
\ No newline at end of file
+Licensed under MIT.

From 09aadadbac733ca1d10c1bb573b6dc461eead9d3 Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Wed, 25 Mar 2015 09:48:30 -0400
Subject: [PATCH 20/25] Prefix it!

Fixes #24
---
 README.md                  | 5 ++---
 flex.scss => _flexbox.scss | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)
 rename flex.scss => _flexbox.scss (98%)

diff --git a/README.md b/README.md
index 376a416..39a07d7 100644
--- a/README.md
+++ b/README.md
@@ -3,9 +3,8 @@ around with flexbox using the native support of current
 browsers. For full support table check: http://caniuse.com/flexbox
 
 Basically this will use:
-- Fallback, old syntax (IE10, Safari, mobile webkit browsers)
-- Prefixed standard syntax (Chrome)
-- Final standards syntax (FF, IE11, Opera 12.1)
+- Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
+- Final standards syntax (FF, Safari, Chrome, IE11, Opera)
 
 ------------------------
 This was inspired by: 
diff --git a/flex.scss b/_flexbox.scss
similarity index 98%
rename from flex.scss
rename to _flexbox.scss
index 7ac6af2..4a38431 100644
--- a/flex.scss
+++ b/_flexbox.scss
@@ -27,9 +27,8 @@
 //
 // Basically this will use:
 //
-// * Fallback, old syntax (IE10, Safari, mobile webkit browsers)
-// * Prefixed standard syntax (Chrome)
-// * Final standards syntax (FF, IE11, Opera 12.1)
+// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
+// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
 //
 // This was inspired by:
 // 

From b6a30f69f39a57220c16f5a0f01d18811b7e90ea Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Fri, 17 Apr 2015 17:19:41 -0400
Subject: [PATCH 21/25] Bower Updates

---
 bower.json | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/bower.json b/bower.json
index 525076d..de55d74 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,9 @@
 {
   "name": "sass-flex-mixin",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license" : "MIT",
   "main": [
-    "flex.scss"
+    "_flexbox.scss"
   ],
   "ignore": [
     "tests",
@@ -15,6 +15,8 @@
   "devDependencies": {},
   "keywords": [
     "sass",
-    "css"
+    "css",
+	"flexbox",
+	"mixin"
   ]
 }

From 71ebfafcf0d35a8865e84caad59d36de059cf729 Mon Sep 17 00:00:00 2001
From: Timo Uhlmann <TimoUhlmann@googlemail.com>
Date: Thu, 14 Apr 2016 15:59:22 +0200
Subject: [PATCH 22/25] Added `sass` field to package.json

Compatibility with [npm-sass](https://github.com/lennym/npm-sass)
---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 4c2029b..4fff93f 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "Set of mixins for cross-browser compatible flexbox",
   "main": "index.js",
+  "sass": "_flexbox.scss",
   "repository": {
     "type": "git",
     "url": "https://github.com/mastastealth/sass-flex-mixin.git"

From f6e9b3fb09a7ca020fcd150764e167619e124877 Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Thu, 28 Apr 2016 15:24:38 -0400
Subject: [PATCH 23/25] Version Tweaks

+ keywords
---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4fff93f..18b42b0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sass-flex-mixin",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Set of mixins for cross-browser compatible flexbox",
   "main": "index.js",
   "sass": "_flexbox.scss",
@@ -11,7 +11,8 @@
   "keywords": [
     "sass",
     "css",
-    "flexbox"
+    "flexbox",
+	"mixin"
   ],
   "author": "Brian Franco <hi@brianfran.co> (http://brianfran.co/)",
   "license": "MIT",

From a4d4b5daf6eb6260878acef65ac32824f2a14bb0 Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Thu, 12 May 2016 12:08:15 -0400
Subject: [PATCH 24/25] Revert Rename

---
 _flexbox.scss => _flex.scss | 0
 bower.json                  | 4 ++--
 package.json                | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename _flexbox.scss => _flex.scss (100%)

diff --git a/_flexbox.scss b/_flex.scss
similarity index 100%
rename from _flexbox.scss
rename to _flex.scss
diff --git a/bower.json b/bower.json
index de55d74..279ef17 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,9 @@
 {
   "name": "sass-flex-mixin",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license" : "MIT",
   "main": [
-    "_flexbox.scss"
+    "_flex.scss"
   ],
   "ignore": [
     "tests",
diff --git a/package.json b/package.json
index 18b42b0..20e66f6 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "sass-flex-mixin",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Set of mixins for cross-browser compatible flexbox",
   "main": "index.js",
-  "sass": "_flexbox.scss",
+  "sass": "_flex.scss",
   "repository": {
     "type": "git",
     "url": "https://github.com/mastastealth/sass-flex-mixin.git"

From f5775ccb780fb428ce4e3e486d4be157d4866eea Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Mon, 15 Jan 2018 22:14:48 -0500
Subject: [PATCH 25/25] Unmaintained

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index e26aa58..bb0ed27 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,7 @@
+⚠⚠⚠
+**NO LONGER MAINTAINED:** With [every major browser](https://caniuse.com/#search=flexbox) supporting Flexbox now, and tools like [autoprefixer](https://github.com/postcss/autoprefixer) covering this and so much more, I am no longer maintaining this repo (as may already be apparent). Feel free to fork and continue using it if you must, but you should really use Autoprefixer now!
+⚠⚠⚠
+
 ## Sass flexbox mixin
 This is a set of mixins for those who want to mess
 around with flexbox using the native support of current