CSS - FLEXBOX v.1

============================
========  CSS - FLEXBOX v.1 - POSTé
============================

============================
======== Using CSS flexible boxes : FLEXBOX CONTEXT Browser compatibility
== https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes?redirectlocale=en-US&redirectslug=CSS%2FTutorials%2FUsing_CSS_flexible_boxes

for FIREFOX 21:
about:config preference:
 "layout.css.flexbox.enabled" to true.

============================
======== FLEXBOX CONTEXT
== http://css-tricks.com/using-flexbox/
== https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
We need to make the container for our columns a flexbox display context.
Just by doing this, all direct children of this element become flex items.
Doesn't matter what they were before, they are flex items now.

Right away we need to weave the old, new, and tweener syntaxes together.
ORDER IS IMPORTANT HERE.
Since the display property itself isn't prefixed,
we need to make sure we don't override newer syntaxes with older syntaxes
for browsers that still (and probably always will) support both.

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }


============================
======== FLEXBOX CSS ALIGN-ITEMS
== http://www.w3schools.com/cssref/css3_pr_align-items.asp
== DEMO INTERACTIVE : http://www.w3schools.com/cssref/playit.asp?filename=playcss_align-items&preval=center

VALUES:
stretch 	Default. Items are stretched to fit the container
center 	    Items are positioned at the center of the container
flex-start 	Items are positioned at the beginning of the container
flex-end 	Items are positioned at the end of the container
baseline 	Items are positioned at the baseline of the container
initial 	Sets this property to its default value. Read about initial
inherit 	Inherits this property from its parent element. Read about inherit


EAMPLE :
div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

============================
======== CONTROLLING COLUMN WIDTHS
== http://css-tricks.com/using-flexbox/
Our goal here is a 20% / 60% / 20% grid.

Step 1 is to set our main content to the 60%.
Step 2 is to set the outside sidebars to fill the remaining space equally.

Again we need to weave together old, new, and tweener syntaxes.

.main-content {
  width: 60%;
}
.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
== COLUMN RE-ORDERING

We want the main content to visually appear in the middle, but be first in the source order.
Easy cheesy in flexbox, but of course we need to weave together the new, old, and tweener syntaxes.

.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}
.main-sidebar {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}



============================
======== FLEX-FLOW : flex-flow
== http://www.w3.org/TR/css3-flexbox/
== <a href="http://stackoverflow.com/questions/7813783/firefox-and-flexbox-when-using-white-space-nowrap-on-child-element-the-flexib?rq=1">Firefox and flexbox</a>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
}

body {
  padding: 5%;
  font-family: 'Open Sans';
  font-size: 1em;
}

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	-ms-flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-flow: row wrap;

  margin: 0 auto;
  max-width: 1500px;

  @media (max-width: 700px) {
    -webkit-flex-flow: column wrap;
  	-moz-flex-flow: column wrap;
	  -ms-flex-flow: column wrap;
  	-ms-flex-direction: column;
  	-ms-flex-wrap: wrap;
	  flex-flow: column wrap;
  }
}
.header {
  padding: 1em 0.5em;
  width: 100%;
  height: 100px;
  background: #cdc9bb;

  @media (max-width: 700px) {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
}
.content {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;

  padding: 1em;
  background: #e7e3d4;

  @media (max-width: 700px) {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
  }
}
.nav {
  width: 200px;
  padding: 1em 0.5em;
  background: #eceae4;

  @media (max-width: 700px) {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    width: 100%;
  }
}
.aside {
  width: 140px;
  padding: 1em 0.5em;
  background: #f8f8f6;

  @media (max-width: 700px) {
    -webkit-box-ordinal-group: 4;
    -moz-box-ordinal-group: 4;
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;

    width: 100%;
  }
}