Added flex properties to container.

Also replaced underscores in flex align properties with dashes.

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

@@ -104,19 +104,19 b''
 
 /* Code below was added on 11/6/2013 by Jonathan Frederic */
 
-.align_start {
+.align-start {
 	-webkit-box-align: start;
 	-moz-box-align: start;
 	box-align: start;
 }
 
-.align_end {
+.align-end {
 	-webkit-box-align: end;
 	-moz-box-align: end;
 	box-align: end;
 }
 
-.align_center {
+.align-center {
 	-webkit-box-align: center;
 	-moz-box-align: center;
 	box-align: center;

IPython/html/static/notebook/js/widgets/container.js

@@ -19,9 +19,12 b' require(["notebook/js/widget"], function(){'
             this.set_flex_property('start', this.model.get('_pack_start'));
             this.set_flex_property('center', this.model.get('_pack_center'));
             this.set_flex_property('end', this.model.get('_pack_end'));
-            this.set_flex_property('align_start', this.model.get('_align_start'));
-            this.set_flex_property('align_center', this.model.get('_align_center'));
-            this.set_flex_property('align_end', this.model.get('_align_end'));
+            this.set_flex_property('align-start', this.model.get('_align_start'));
+            this.set_flex_property('align-center', this.model.get('_align_center'));
+            this.set_flex_property('align-end', this.model.get('_align_end'));
+            this.set_flex_property('box-flex0', this.model.get('_flex0'));
+            this.set_flex_property('box-flex1', this.model.get('_flex1'));
+            this.set_flex_property('box-flex2', this.model.get('_flex2'));
 
             return IPython.WidgetView.prototype.update.call(this);
         },

IPython/html/static/style/ipython.min.css

@@ -19,6 +19,7 b''
 .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;}
 .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;}
 <<<<<<< HEAD
+<<<<<<< HEAD
 div.error{margin:2em;text-align:center;}
 div.error>h1{font-size:500%;line-height:normal;}
 div.error>p{font-size:200%;line-height:normal;}
@@ -28,6 +29,11 b' div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;}'
 .align_end{-webkit-box-align:end;-moz-box-align:end;box-align:end;}
 .align_center{-webkit-box-align:center;-moz-box-align:center;box-align:center;}
 >>>>>>> Added flexible box model align properties.
+=======
+.align-start{-webkit-box-align:start;-moz-box-align:start;box-align:start;}
+.align-end{-webkit-box-align:end;-moz-box-align:end;box-align:end;}
+.align-center{-webkit-box-align:center;-moz-box-align:center;box-align:center;}
+>>>>>>> Added flex properties to container.
 .center-nav{display:inline-block;margin-bottom:-4px;}
 .alternate_upload{background-color:none;display:inline;}
 .alternate_upload.form{padding:0;margin:0;}

IPython/html/static/style/style.min.css

@@ -1386,6 +1386,7 b' ul.icons-ul{list-style-type:none;text-indent:-0.7142857142857143em;margin-left:2'
 .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;}
 .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;}
 <<<<<<< HEAD
+<<<<<<< HEAD
 div.error{margin:2em;text-align:center;}
 div.error>h1{font-size:500%;line-height:normal;}
 div.error>p{font-size:200%;line-height:normal;}
@@ -1395,6 +1396,11 b' div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;}'
 .align_end{-webkit-box-align:end;-moz-box-align:end;box-align:end;}
 .align_center{-webkit-box-align:center;-moz-box-align:center;box-align:center;}
 >>>>>>> Added flexible box model align properties.
+=======
+.align-start{-webkit-box-align:start;-moz-box-align:start;box-align:start;}
+.align-end{-webkit-box-align:end;-moz-box-align:end;box-align:end;}
+.align-center{-webkit-box-align:center;-moz-box-align:center;box-align:center;}
+>>>>>>> Added flex properties to container.
 body{background-color:white;position:absolute;left:0px;right:0px;top:0px;bottom:0px;overflow:visible;}
 div#header{display:none;}
 #ipython_notebook{padding-left:16px;}

IPython/html/widgets/widget_container.py

@@ -26,7 +26,8 b' class ContainerWidget(Widget):'
     # Keys, all private and managed by helper methods.  Flexible box model
     # classes...
     _keys = ['_vbox', '_hbox', '_align_start', '_align_end', '_align_center',
-            '_pack_start', '_pack_end', '_pack_center']
+            '_pack_start', '_pack_end', '_pack_center', '_flex0', '_flex1', 
+            '_flex2']
     _hbox = Bool(False)
     _vbox = Bool(False)
     _align_start = Bool(False)
@@ -35,6 +36,9 b' class ContainerWidget(Widget):'
     _pack_start = Bool(False)
     _pack_end = Bool(False)
     _pack_center = Bool(False)
+    _flex0 = Bool(False)
+    _flex1 = Bool(False)
+    _flex2 = Bool(False)
     
     def hbox(self, enabled=True):
         """Make this container an hbox.  Automatically disables conflicting
@@ -146,3 +150,49 b' class ContainerWidget(Widget):'
         if enabled:
             self._pack_start = False
             self._pack_end = False
+
+            
+    def flex0(self, enabled=True):
+        """Put this container in flex0 mode.  Automatically disables conflicting
+        flex modes.  See the widget tutorial part 5 example notebook for more
+        information.
+
+        Parameters
+        ----------
+        enabled: bool (optional)
+            Enabled or disable the flex0 attribute of the container, defaults to 
+            True."""
+        self._flex0 = enabled
+        if enabled:
+            self._flex1 = False
+            self._flex2 = False
+            
+    def flex1(self, enabled=True):
+        """Put this container in flex1 mode.  Automatically disables conflicting
+        flex modes.  See the widget tutorial part 5 example notebook for more
+        information.
+
+        Parameters
+        ----------
+        enabled: bool (optional)
+            Enabled or disable the flex1 attribute of the container, defaults to 
+            True."""
+        self._flex1 = enabled
+        if enabled:
+            self._flex0 = False
+            self._flex2 = False
+            
+    def flex2(self, enabled=True):
+        """Put this container in flex2 mode.  Automatically disables conflicting
+        flex modes.  See the widget tutorial part 5 example notebook for more
+        information.
+
+        Parameters
+        ----------
+        enabled: bool (optional)
+            Enabled or disable the flex2 attribute of the container, defaults to 
+            True."""
+        self._flex2 = enabled
+        if enabled:
+            self._flex0 = False
+            self._flex1 = False