Added flexible box model align properties.

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

@@ -101,3 +101,23 b''
     -moz-box-pack: center;
     box-pack: center;
 }
+
+/* Code below was added on 11/6/2013 by Jonathan Frederic */
+
+.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;
+}

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

@@ -4,28 +4,37 b' require(["notebook/js/widget"], function(){'
 
     var ContainerView = IPython.WidgetView.extend({
         
-        render : function(){
+        render: function(){
             this.$el = $('<div />')
                 .addClass('widget-container');
         },
         
-        update : function(){
+        update: function(){
 
             // Apply flexible box model properties by adding and removing
             // corrosponding CSS classes.
             // Defined in IPython/html/static/base/less/flexbox.less
-            var flex_properties = ['vbox', 'hbox', 'center', 'end', 'center'];
-            for (var index in flex_properties) {
-                if (this.model.get('_' + flex_properties[index])) {
-                    this.$el.addClass(flex_properties[index]);
-                } else {
-                    this.$el.removeClass(flex_properties[index]);
-                }    
-            }
+            this.set_flex_property('vbox', this.model.get('_vbox'));
+            this.set_flex_property('hbox', this.model.get('_hbox'));
+            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'));
+
             return IPython.WidgetView.prototype.update.call(this);
         },
 
-        display_child : function(view) {
+        set_flex_property: function(property_name, enabled) {
+            if (enabled) {
+                this.$el.addClass(property_name);
+            } else {
+                this.$el.removeClass(property_name);
+            }
+        },
+
+        display_child: function(view) {
             this.$el.append(view.$el);
         },
     });

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

@@ -18,10 +18,16 b''
 .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;}
 .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
 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;}
 div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;}
+=======
+.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 flexible box model align properties.
 .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

@@ -1385,10 +1385,16 b' ul.icons-ul{list-style-type:none;text-indent:-0.7142857142857143em;margin-left:2'
 .start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;}
 .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
 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;}
 div.traceback-wrapper{text-align:left;max-width:800px;margin:auto;}
+=======
+.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 flexible box model align properties.
 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

@@ -25,12 +25,16 b' class ContainerWidget(Widget):'
 
     # Keys, all private and managed by helper methods.  Flexible box model
     # classes...
-    _keys = ['_vbox', '_hbox', '_start', '_end', '_center']
+    _keys = ['_vbox', '_hbox', '_align_start', '_align_end', '_align_center',
+            '_pack_start', '_pack_end', '_pack_center']
     _hbox = Bool(False)
     _vbox = Bool(False)
-    _start = Bool(False)
-    _end = Bool(False)
-    _center = Bool(False)
+    _align_start = Bool(False)
+    _align_end = Bool(False)
+    _align_center = Bool(False)
+    _pack_start = Bool(False)
+    _pack_end = Bool(False)
+    _pack_center = Bool(False)
     
     def hbox(self, enabled=True):
         """Make this container an hbox.  Automatically disables conflicting
@@ -58,7 +62,7 b' class ContainerWidget(Widget):'
         if enabled:
             self._hbox = False
             
-    def start(self, enabled=True):
+    def align_start(self, enabled=True):
         """Make the contents of this container align to the start of the axis.  
         Automatically disables conflicting alignments.
 
@@ -67,12 +71,12 b' class ContainerWidget(Widget):'
         enabled: bool (optional)
             Enabled or disable the start alignment of the container, defaults to 
             True."""
-        self._start = enabled
+        self._align_start = enabled
         if enabled:
-            self._end = False
-            self._center = False
+            self._align_end = False
+            self._align_center = False
             
-    def end(self, enabled=True):
+    def align_end(self, enabled=True):
         """Make the contents of this container align to the end of the axis.  
         Automatically disables conflicting alignments.
 
@@ -81,12 +85,12 b' class ContainerWidget(Widget):'
         enabled: bool (optional)
             Enabled or disable the end alignment of the container, defaults to 
             True."""
-        self._end = enabled
+        self._align_end = enabled
         if enabled:
-            self._start = False
-            self._center = False
+            self._align_start = False
+            self._align_center = False
             
-    def center(self, enabled=True):
+    def align_center(self, enabled=True):
         """Make the contents of this container align to the center of the axis.  
         Automatically disables conflicting alignments.
 
@@ -95,7 +99,50 b' class ContainerWidget(Widget):'
         enabled: bool (optional)
             Enabled or disable the center alignment of the container, defaults to 
             True."""
-        self._center = enabled
+        self._align_center = enabled
         if enabled:
-            self._start = False
-            self._end = False
+            self._align_start = False
+            self._align_end = False
+
+            
+    def pack_start(self, enabled=True):
+        """Make the contents of this container pack to the start of the axis.  
+        Automatically disables conflicting packings.
+
+        Parameters
+        ----------
+        enabled: bool (optional)
+            Enabled or disable the start packing of the container, defaults to 
+            True."""
+        self._pack_start = enabled
+        if enabled:
+            self._pack_end = False
+            self._pack_center = False
+            
+    def pack_end(self, enabled=True):
+        """Make the contents of this container pack to the end of the axis.  
+        Automatically disables conflicting packings.
+
+        Parameters
+        ----------
+        enabled: bool (optional)
+            Enabled or disable the end packing of the container, defaults to 
+            True."""
+        self._pack_end = enabled
+        if enabled:
+            self._pack_start = False
+            self._pack_center = False
+            
+    def pack_center(self, enabled=True):
+        """Make the contents of this container pack to the center of the axis.  
+        Automatically disables conflicting packings.
+
+        Parameters
+        ----------
+        enabled: bool (optional)
+            Enabled or disable the center packing of the container, defaults to 
+            True."""
+        self._pack_center = enabled
+        if enabled:
+            self._pack_start = False
+            self._pack_end = False