Corrected a lot of small misuses of the new flex model.

IPython/html/static/base/less/flexbox.less

@@ -1,149 +1,200 b''
 
 /* Flexible box model classes */
 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
 
+/* This file is a compatability layer.  It allows the usage of flexible box 
+model layouts accross multiple browsers, including older browsers.  The newest,
+universal implementation of the flexible box model is used when available (see
+`Modern browsers` comments below).  Browsers that are known to implement this 
+new spec completely include:
+
+    Firefox 28.0+
+    Chrome 29.0+
+    Internet Explorer 11+ 
+    Opera 17.0+
+
+Browsers not listed, including Safari, are supported via the styling under the
+`Old browsers` comments below.
+*/
+
+
 .hbox {
+    /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: horizontal;
     -webkit-box-align: stretch;
 
     display: -moz-box;
     -moz-box-orient: horizontal;
     -moz-box-align: stretch;
 
     display: box;
     box-orient: horizontal;
     box-align: stretch;
 
+    /* Modern browsers */
     display: flex;
     flex-direction: row;
     align-items: stretch;
 }
 
 .hbox > * {
+    /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
-    flex: auto;
+
+    /* Modern browsers */
+    flex: none;
 }
 
 .vbox {
+    /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-box-align: stretch;
 
     display: -moz-box;
     -moz-box-orient: vertical;
     -moz-box-align: stretch;
 
     display: box;
     box-orient: vertical;
     box-align: stretch;
     /* width must be 100% to force FF to behave like webkit */
     width: 100%;
 
+    /* Modern browsers */
     display: flex;
     flex-direction: column;
     align-items: stretch;
 }
 
 .vbox > * {
+    /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
-    flex: auto;
+    
+    /* Modern browsers */
+    flex: none;
 }
 
 .reverse {
+    /* Old browsers */
     -webkit-box-direction: reverse;
     -moz-box-direction: reverse;
     box-direction: reverse;
-    flex-direction: column-reverse;
+    
+    /* Modern browsers */
+    flex-direction: row-reverse;
 }
 
 .box-flex0 {
+    /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
-    flex: auto;
+    
+    /* Modern browsers */
+    flex: none;
 }
 
 .box-flex1 {
+    /* Old browsers */
     -webkit-box-flex: 1;
     -moz-box-flex: 1;
     box-flex: 1;
+
+    /* Modern browsers */
     flex: 1;
 }
 
 .box-flex {
+    /* Old browsers */
     .box-flex1();
 }
 
 .box-flex2 {
+    /* Old browsers */
     -webkit-box-flex: 2;
     -moz-box-flex: 2;
     box-flex: 2;
+
+    /* Modern browsers */
     flex: 2;
 }
 
 .box-group1 {
-    /* 
-    Deprecated
-        Grouping isn't supported in http://dev.w3.org/csswg/css-flexbox/
-    */
+    /*  Deprecated */
     -webkit-box-flex-group: 1;
     -moz-box-flex-group: 1;
     box-flex-group: 1;
 }
 
 .box-group2 {
-    /* 
-    Deprecated
-        Grouping isn't supported in http://dev.w3.org/csswg/css-flexbox/
-    */
+    /* Deprecated */
     -webkit-box-flex-group: 2;
     -moz-box-flex-group: 2;
     box-flex-group: 2;
 }
 
 .start {
+    /* Old browsers */
     -webkit-box-pack: start;
     -moz-box-pack: start;
     box-pack: start;
+    
+    /* Modern browsers */
     justify-content: flex-start;
 }
 
 .end {
+    /* Old browsers */
     -webkit-box-pack: end;
     -moz-box-pack: end;
     box-pack: end;
+    
+    /* Modern browsers */
     justify-content: flex-end;
 }
 
 .center {
+    /* Old browsers */
     -webkit-box-pack: center;
     -moz-box-pack: center;
     box-pack: center;
+    
+    /* Modern browsers */
     justify-content: center;
 }
 
 .align-start {
+    /* Old browsers */
     -webkit-box-align: start;
     -moz-box-align: start;
     box-align: start;
-    align-content: flex-start;
+    
+    /* Modern browsers */
+    align-items: flex-start;
 }
 
 .align-end {
+    /* Old browsers */
     -webkit-box-align: end;
     -moz-box-align: end;
     box-align: end;
-    align-content: flex-end;
+    
+    /* Modern browsers */
+    align-items: flex-end;
 }
 
 .align-center {
+    /* Old browsers */
     -webkit-box-align: center;
     -moz-box-align: center;
     box-align: center;
-    align-content: center;
+    
+    /* Modern browsers */
+    align-items: center;
 }