Skip to content

Instantly share code, notes, and snippets.

@cimmanon
Last active April 7, 2017 20:04

Revisions

  1. cimmanon revised this gist Jun 19, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -60,8 +60,8 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | flex-direction | flex-direction | box-orient & box-direction | Controls whether the *main axis* is vertical or horizontal and whether the *flex items* should be ordered normally or reversed |
    | flex-wrap | flex-wrap | box-lines | Controls the wrapping of *flex items* |
    | justify-content | flex-pack | box-pack | Distribution of extra space along the *main axis* |
    | align-content | flex-line-pack | box-align | Distribution of extra space along the *cross axis* (only applies to multiline flex contaners) |
    | align-items | flex-align | N/A | Alignment of items along the *cross axis* |
    | align-content | flex-line-pack | N/A | Distribution of extra space along the *cross axis* (only applies to multiline flex contaners) |
    | align-items | flex-align | box-align | Alignment of items along the *cross axis* |

    NOTE: Steven Bradley of Vanseo Design hints that no browser had a `box-lines` implementation as of August 29, 2011. Firefox is not expecting to support `flex-wrap` until Q2 of 2013.

  2. cimmanon revised this gist Apr 1, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -50,6 +50,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    * [Flexbox mixins for Sass](https://gist.github.com/cimmanon/4461470) - covers all 3 specifications
    * [CSS Tricks: "Old" Flexbox and "New" Flexbox](http://css-tricks.com/old-flexbox-and-new-flexbox/)
    * [CSS Tricks: Using Flexbox](http://css-tricks.com/using-flexbox/)
    * [Flexy Boxes](http://the-echoplex.net/flexyboxes/)

    # Properties for *Flex Containers*

  3. cimmanon revised this gist Mar 31, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | flex-direction | flex-direction | box-orient & box-direction | Controls whether the *main axis* is vertical or horizontal and whether the *flex items* should be ordered normally or reversed |
    | flex-wrap | flex-wrap | box-lines | Controls the wrapping of *flex items* |
    | justify-content | flex-pack | box-pack | Distribution of extra space along the *main axis* |
    | align-content | flex-line-pack | box-align | Distribution of extra space along the *cross axis* |
    | align-content | flex-line-pack | box-align | Distribution of extra space along the *cross axis* (only applies to multiline flex contaners) |
    | align-items | flex-align | N/A | Alignment of items along the *cross axis* |

    NOTE: Steven Bradley of Vanseo Design hints that no browser had a `box-lines` implementation as of August 29, 2011. Firefox is not expecting to support `flex-wrap` until Q2 of 2013.
  4. cimmanon revised this gist Mar 31, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -62,7 +62,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | align-content | flex-line-pack | box-align | Distribution of extra space along the *cross axis* |
    | align-items | flex-align | N/A | Alignment of items along the *cross axis* |

    NOTE: Steven Bradley of Vanseo Design hints that no browser had a `box-lines` implementation as of August 29, 2011. Firefox is not expecting to support `flex-wrap` until Q2.
    NOTE: Steven Bradley of Vanseo Design hints that no browser had a `box-lines` implementation as of August 29, 2011. Firefox is not expecting to support `flex-wrap` until Q2 of 2013.

    * [Stack Overflow: (CSS3 flex box) specifying multiple box-lines doesn't work](http://stackoverflow.com/questions/5010083/css3-flex-box-specifying-multiple-box-lines-doesnt-work)
    * [Bugzilla@Mozilla: Support multi-line flexbox](https://bugzilla.mozilla.org/show_bug.cgi?id=702508)
  5. cimmanon revised this gist Feb 28, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ### Resources

    * [NetTuts: An Introduction to CSS Flexbox](http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/)
    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85\).aspx)
    * [IE Test Drive: Flexin'](http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html) (Demo)
    * [IE Test Drive: Hands On: CSS3 Flexible Box Layout](http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm) (Demo)
  6. cimmanon revised this gist Feb 28, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -48,6 +48,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    * [Flexbox mixins for Sass](https://gist.github.com/cimmanon/4461470) - covers all 3 specifications
    * [CSS Tricks: "Old" Flexbox and "New" Flexbox](http://css-tricks.com/old-flexbox-and-new-flexbox/)
    * [CSS Tricks: Using Flexbox](http://css-tricks.com/using-flexbox/)

    # Properties for *Flex Containers*

  7. cimmanon revised this gist Feb 28, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,6 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ### Resources

    * [Smashing Magazine: CSS3 Flexible Box Layout Explained](http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/)
    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85\).aspx)
    * [IE Test Drive: Flexin'](http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html) (Demo)
    * [IE Test Drive: Hands On: CSS3 Flexible Box Layout](http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm) (Demo)
    @@ -40,6 +39,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ### Resources

    * [Smashing Magazine: CSS3 Flexible Box Layout Explained](http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/)
    * [HTML5 Rocks: Quick hits with the Flexible Box Model](http://www.html5rocks.com/en/tutorials/flexbox/quick/)
    * [Vanseo Design: CSS3 Flexible Box Model](http://www.vanseodesign.com/css/flexbox/)
    * [Flexbox polyfill](https://github.com/doctyper/flexie)
  8. cimmanon revised this gist Feb 27, 2013. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -91,5 +91,8 @@ NOTE: The 2009 `box-flex` property is like a hybrid of `flex-grow` and `flex-shr
    | space-between | justify | justify | justify-content, align-content |
    | space-around | distribute | N/A | justify-content, align-content |
    | * | * | * | flex-direction |
    | * | * | * | order |

    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse). To translate this to the 2009 spec, you need to use two properties: `box-orient` (horizontal|vertical) and `box-direction` (normal|reverse).
    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse). To translate this to the 2009 spec, you need to use two properties: `box-orient` (horizontal|vertical) and `box-direction` (normal|reverse).

    NOTE: `order` has a default of 0 while `box-ordinal-group` defaults to 1.
  9. cimmanon revised this gist Feb 24, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -60,8 +60,9 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | align-content | flex-line-pack | box-align | Distribution of extra space along the *cross axis* |
    | align-items | flex-align | N/A | Alignment of items along the *cross axis* |

    NOTE: Steven Bradley of Vanseo Design hints that no browser had a `box-lines` implementation as of August 29, 2011. Firefox is not expecting to support `flex-wrap` until version 22.
    NOTE: Steven Bradley of Vanseo Design hints that no browser had a `box-lines` implementation as of August 29, 2011. Firefox is not expecting to support `flex-wrap` until Q2.

    * [Stack Overflow: (CSS3 flex box) specifying multiple box-lines doesn't work](http://stackoverflow.com/questions/5010083/css3-flex-box-specifying-multiple-box-lines-doesnt-work)
    * [Bugzilla@Mozilla: Support multi-line flexbox](https://bugzilla.mozilla.org/show_bug.cgi?id=702508)
    * [Bugzilla@Mozilla: implement box-lines property from css3-flexbox](https://bugzilla.mozilla.org/show_bug.cgi?id=562073)
    * [The Holbert Report: CSS3 Flexbox enabled in nightlies & ready for testing!](http://blog.dholbert.org/2012/12/css3-flexbox-enabled-in-nightlies-ready.html)
  10. cimmanon revised this gist Feb 22, 2013. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -40,6 +40,8 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ### Resources

    * [HTML5 Rocks: Quick hits with the Flexible Box Model](http://www.html5rocks.com/en/tutorials/flexbox/quick/)
    * [Vanseo Design: CSS3 Flexible Box Model](http://www.vanseodesign.com/css/flexbox/)
    * [Flexbox polyfill](https://github.com/doctyper/flexie)

    # Additional Resources
    @@ -58,7 +60,11 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | align-content | flex-line-pack | box-align | Distribution of extra space along the *cross axis* |
    | align-items | flex-align | N/A | Alignment of items along the *cross axis* |

    NOTE: Firefox never implemented the `box-lines` property in versions that follow the 2009 specification, which controls whether or not the *flex container* will allow its children to wrap.
    NOTE: Steven Bradley of Vanseo Design hints that no browser had a `box-lines` implementation as of August 29, 2011. Firefox is not expecting to support `flex-wrap` until version 22.

    * [Bugzilla@Mozilla: Support multi-line flexbox](https://bugzilla.mozilla.org/show_bug.cgi?id=702508)
    * [Bugzilla@Mozilla: implement box-lines property from css3-flexbox](https://bugzilla.mozilla.org/show_bug.cgi?id=562073)
    * [The Holbert Report: CSS3 Flexbox enabled in nightlies & ready for testing!](http://blog.dholbert.org/2012/12/css3-flexbox-enabled-in-nightlies-ready.html)

    # Properties for *Flex Items* (children of *Flex Containers*)

  11. cimmanon revised this gist Feb 19, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ### Resources

    * [Smashing Magazine: CSS3 Flexible Box Layout Explained](http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/)
    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85\).aspx)
    * [IE Test Drive: Flexin'](http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html) (Demo)
    * [IE Test Drive: Hands On: CSS3 Flexible Box Layout](http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm) (Demo)
  12. cimmanon revised this gist Feb 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -57,7 +57,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | align-content | flex-line-pack | box-align | Distribution of extra space along the *cross axis* |
    | align-items | flex-align | N/A | Alignment of items along the *cross axis* |

    NOTE: Firefox never implemented the `box-lines` property, which controls whether or not the *flex container* will allow its children to wrap.
    NOTE: Firefox never implemented the `box-lines` property in versions that follow the 2009 specification, which controls whether or not the *flex container* will allow its children to wrap.

    # Properties for *Flex Items* (children of *Flex Containers*)

  13. cimmanon revised this gist Feb 16, 2013. No changes.
  14. cimmanon revised this gist Feb 16, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # CSS Flexbox
    # CSS Flexbox: Specification Unification

    The flexbox module has been kicking around for quite some time. There are 3 different specifications that have been implemented in the major browsers. This is an overview of how to cover all of them.
    The flexbox module has been kicking around for quite some time. There are 3 different specifications that have been implemented in the major browsers. This is an overview of how to cover all of them. If you're interested in how to use flexbox, there are many fine articles out there (some have been linked below).

    ## [September 2012 Candidate Recommendation](http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)

  15. cimmanon revised this gist Feb 16, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -84,4 +84,4 @@ NOTE: The 2009 `box-flex` property is like a hybrid of `flex-grow` and `flex-shr
    | space-around | distribute | N/A | justify-content, align-content |
    | * | * | * | flex-direction |

    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse), which requires a bit of extra work to translate it to the comparable 2009 properties: `box-orient` (horizontal|vertical) and `box-direction` (normal|reverse).
    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse). To translate this to the 2009 spec, you need to use two properties: `box-orient` (horizontal|vertical) and `box-direction` (normal|reverse).
  16. cimmanon revised this gist Feb 12, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -53,9 +53,9 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | flex-flow | flex-flow | N/A | Shorthand: `flex-direction` `flex-wrap` |
    | flex-direction | flex-direction | box-orient & box-direction | Controls whether the *main axis* is vertical or horizontal and whether the *flex items* should be ordered normally or reversed |
    | flex-wrap | flex-wrap | box-lines | Controls the wrapping of *flex items* |
    | justify-content | flex-pack | box-pack | Distribute extra space along the *main axis* |
    | align-content | flex-line-pack | box-align | Distribute extra space along the *cross axis* |
    | align-items | flex-align | N/A | Align items along the *cross axis* |
    | justify-content | flex-pack | box-pack | Distribution of extra space along the *main axis* |
    | align-content | flex-line-pack | box-align | Distribution of extra space along the *cross axis* |
    | align-items | flex-align | N/A | Alignment of items along the *cross axis* |

    NOTE: Firefox never implemented the `box-lines` property, which controls whether or not the *flex container* will allow its children to wrap.

  17. cimmanon revised this gist Feb 12, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    ### Resources

    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85\).aspx)
    * [IE Test Drive](http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html) (Demo)
    * [IE Test Drive: Flexin'](http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html) (Demo)
    * [IE Test Drive: Hands On: CSS3 Flexible Box Layout](http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm) (Demo)

    ## [July 2009 Working Draft](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
  18. cimmanon revised this gist Feb 12, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -82,5 +82,6 @@ NOTE: The 2009 `box-flex` property is like a hybrid of `flex-grow` and `flex-shr
    | flex-end | end | end | justify-content, align-content, align-items, align-self |
    | space-between | justify | justify | justify-content, align-content |
    | space-around | distribute | N/A | justify-content, align-content |
    | * | * | * | flex-direction |

    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse), which requires a bit of extra work to translate it to the comparable 2009 properties: `box-orient` (horizontal|vertical) and `box-direction` (normal|reverse).
  19. cimmanon revised this gist Feb 12, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85\).aspx)
    * [IE Test Drive](http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html) (Demo)
    * [IE Test Drive: Hands On: CSS3 Flexible Box Layout](http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm)
    * [IE Test Drive: Hands On: CSS3 Flexible Box Layout](http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm) (Demo)

    ## [July 2009 Working Draft](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)

  20. cimmanon revised this gist Feb 12, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,8 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    ### Resources

    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85\).aspx)
    * [IE Test Drive](http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html) (Demo)
    * [IE Test Drive: Hands On: CSS3 Flexible Box Layout](http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm)

    ## [July 2009 Working Draft](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)

  21. cimmanon revised this gist Feb 12, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -81,4 +81,4 @@ NOTE: The 2009 `box-flex` property is like a hybrid of `flex-grow` and `flex-shr
    | space-between | justify | justify | justify-content, align-content |
    | space-around | distribute | N/A | justify-content, align-content |

    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse), which requires a bit of extra work to translate it to the comparable 2009 properties: `box-orient` (vertical|horizontal) and `box-direction` (normal|reverse).
    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse), which requires a bit of extra work to translate it to the comparable 2009 properties: `box-orient` (horizontal|vertical) and `box-direction` (normal|reverse).
  22. cimmanon revised this gist Feb 12, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -55,8 +55,6 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | align-content | flex-line-pack | box-align | Distribute extra space along the *cross axis* |
    | align-items | flex-align | N/A | Align items along the *cross axis* |

    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse), which requires a bit of extra work to translate it to the comparable 2009 properties: `box-orient` (vertical|horizontal) and `box-direction` (normal|reverse).

    NOTE: Firefox never implemented the `box-lines` property, which controls whether or not the *flex container* will allow its children to wrap.

    # Properties for *Flex Items* (children of *Flex Containers*)
    @@ -81,4 +79,6 @@ NOTE: The 2009 `box-flex` property is like a hybrid of `flex-grow` and `flex-shr
    | flex-start | start | start | justify-content, align-content, align-items, align-self |
    | flex-end | end | end | justify-content, align-content, align-items, align-self |
    | space-between | justify | justify | justify-content, align-content |
    | space-around | distribute | N/A | justify-content, align-content |
    | space-around | distribute | N/A | justify-content, align-content |

    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse), which requires a bit of extra work to translate it to the comparable 2009 properties: `box-orient` (vertical|horizontal) and `box-direction` (normal|reverse).
  23. cimmanon revised this gist Feb 12, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -55,6 +55,8 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | align-content | flex-line-pack | box-align | Distribute extra space along the *cross axis* |
    | align-items | flex-align | N/A | Align items along the *cross axis* |

    NOTE: `flex-direction` takes a single value (row|row-reverse|column|column-reverse), which requires a bit of extra work to translate it to the comparable 2009 properties: `box-orient` (vertical|horizontal) and `box-direction` (normal|reverse).

    NOTE: Firefox never implemented the `box-lines` property, which controls whether or not the *flex container* will allow its children to wrap.

    # Properties for *Flex Items* (children of *Flex Containers*)
  24. cimmanon revised this gist Feb 11, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -50,7 +50,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | ------ | ------ | ------ | ------ |
    | flex-flow | flex-flow | N/A | Shorthand: `flex-direction` `flex-wrap` |
    | flex-direction | flex-direction | box-orient & box-direction | Controls whether the *main axis* is vertical or horizontal and whether the *flex items* should be ordered normally or reversed |
    | flex-wrap | flex-wrap | box-lines | Controls if or how the *flex items* wrap |
    | flex-wrap | flex-wrap | box-lines | Controls the wrapping of *flex items* |
    | justify-content | flex-pack | box-pack | Distribute extra space along the *main axis* |
    | align-content | flex-line-pack | box-align | Distribute extra space along the *cross axis* |
    | align-items | flex-align | N/A | Align items along the *cross axis* |
  25. cimmanon revised this gist Feb 11, 2013. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -49,16 +49,14 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | Standard | Mar 2012 | July 2009 | Description |
    | ------ | ------ | ------ | ------ |
    | flex-flow | flex-flow | N/A | Shorthand: `flex-direction` `flex-wrap` |
    | flex-direction | flex-direction | box-orient | Controls whether the *main axis* is vertical or horizontal |
    | flex-wrap | flex-wrap | box-lines & box-direction | Controls whether or not the *flex items* wrap and whether they should be ordered normally or reversed |
    | flex-direction | flex-direction | box-orient & box-direction | Controls whether the *main axis* is vertical or horizontal and whether the *flex items* should be ordered normally or reversed |
    | flex-wrap | flex-wrap | box-lines | Controls if or how the *flex items* wrap |
    | justify-content | flex-pack | box-pack | Distribute extra space along the *main axis* |
    | align-content | flex-line-pack | box-align | Distribute extra space along the *cross axis* |
    | align-items | flex-align | N/A | Align items along the *cross axis* |

    NOTE: Firefox never implemented the `box-lines` property, which controls whether or not the *flex container* will allow its children to wrap.

    NOTE: `box-lines` and `box-direction` take different values than `flex-wrap` does.

    # Properties for *Flex Items* (children of *Flex Containers*)

    | Standard | Mar 2012 | July 2009 | Description |
  26. cimmanon revised this gist Feb 11, 2013. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -50,13 +50,15 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    | ------ | ------ | ------ | ------ |
    | flex-flow | flex-flow | N/A | Shorthand: `flex-direction` `flex-wrap` |
    | flex-direction | flex-direction | box-orient | Controls whether the *main axis* is vertical or horizontal |
    | flex-wrap | flex-wrap | box-lines & box-direction | Controls whether or not the child elements wrap and whether the children should flow normally or be reversed |
    | flex-wrap | flex-wrap | box-lines & box-direction | Controls whether or not the *flex items* wrap and whether they should be ordered normally or reversed |
    | justify-content | flex-pack | box-pack | Distribute extra space along the *main axis* |
    | align-content | flex-line-pack | box-align | Distribute extra space along the *cross axis* |
    | align-items | flex-align | N/A | Align items along the *cross axis* |

    NOTE: Firefox never implemented the `box-lines` property, which controls whether or not the *flex container* will allow its children to wrap.

    NOTE: `box-lines` and `box-direction` take different values than `flex-wrap` does.

    # Properties for *Flex Items* (children of *Flex Containers*)

    | Standard | Mar 2012 | July 2009 | Description |
  27. cimmanon revised this gist Feb 9, 2013. 1 changed file with 8 additions and 2 deletions.
    10 changes: 8 additions & 2 deletions flexbox.md
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,8 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ## [September 2012 Candidate Recommendation](http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)

    ### Browsers

    * Chrome 21 (prefixed)
    * Opera 12.1 (unprefixed)
    * Firefox 20 (unprefixed)
    @@ -16,6 +18,8 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ## [March 2012 Working Draft](http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)

    ### Browsers

    * Chrome 17 (prefixed)
    * Internet Explorer 10 (prefixed)

    @@ -25,9 +29,11 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ## [July 2009 Working Draft](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)

    ### Browsers

    * Firefox 2.0? (prefixed)
    * Chrome 4.0?
    * Safari 3.1?
    * Chrome 4.0? (prefixed)
    * Safari 3.1? (prefixed)

    ### Resources

  28. cimmanon revised this gist Feb 9, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ### Resources

    * [Flexbox polyfill](https://github.com/doctyper/flexie) - polyfill according to the 2009 specification
    * [Flexbox polyfill](https://github.com/doctyper/flexie)

    # Additional Resources

  29. cimmanon revised this gist Feb 9, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@ The flexbox module has been kicking around for quite some time. There are 3 dif

    ### Resources

    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85).aspx)
    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85\).aspx)

    ## [July 2009 Working Draft](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)

  30. cimmanon revised this gist Feb 9, 2013. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion flexbox.md
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,8 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    * Opera 12.1 (unprefixed)
    * Firefox 20 (unprefixed)

    ### Resources

    * [MDN: Using CSS flexible boxes](https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes)
    * [Dev.Opera: Flexbox — fast track to layout nirvana?](http://dev.opera.com/articles/view/flexbox-basics/)
    * [Bocoup: Dive into Flexbox](http://weblog.bocoup.com/dive-into-flexbox/)
    @@ -17,6 +19,8 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    * Chrome 17 (prefixed)
    * Internet Explorer 10 (prefixed)

    ### Resources

    * [MSDN: Flexible box ("Flexbox") layout (Windows)](http://msdn.microsoft.com/en-ca/library/ie/hh673531(v=vs.85).aspx)

    ## [July 2009 Working Draft](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
    @@ -25,9 +29,11 @@ The flexbox module has been kicking around for quite some time. There are 3 dif
    * Chrome 4.0?
    * Safari 3.1?

    ### Resources

    * [Flexbox polyfill](https://github.com/doctyper/flexie) - polyfill according to the 2009 specification

    # More Resources
    # Additional Resources

    * [Flexbox mixins for Sass](https://gist.github.com/cimmanon/4461470) - covers all 3 specifications
    * [CSS Tricks: "Old" Flexbox and "New" Flexbox](http://css-tricks.com/old-flexbox-and-new-flexbox/)