Flex box system improvements

Now to set a container to vbox or hbox you call .vbox() or .hbox()

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

@@ -6,20 +6,22 require(["notebook/js/widget"], function(){
         
         render : function(){
             this.$el = $('<div />')
+                .addClass('widget_container')
                 .addClass(this.model.comm.comm_id);
         },
         
         update : function(){
-            if (this.model.get('vbox')) {
-                this.$el.addClass('vbox');
-            } else {
-                this.$el.removeClass('vbox');
-            }
-            
-            if (this.model.get('hbox')) {
-                this.$el.addClass('hbox');
-            } else {
-                this.$el.removeClass('hbox');
+
+            // 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]);
+                }    
             }
         },
     });

IPython/html/static/notebook/less/widgetarea.less

@@ -1,25 +1,20
 
-div.widget_area {
-    page-break-inside: avoid;
-    .vbox();
+div.widget_container {
+    .box-flex2();
+    .border-box-sizing();
 }
 
-div.widget_hbox {
+div.widget_area {
+    page-break-inside: avoid;
     .hbox();
 }
 
-div.widget_vbox {
-    .vbox();
-}
-
-div.widget_item {
-    display: inline-block;
-}
-
 /* This class is for the widget subarea inside the widget_area and after
    the prompt div. */
 div.widget_subarea {
     padding: 0.44em 0.4em 0.4em 1px;
     margin-left: 6px;
-    .box-flex1();
+    .border-box-sizing();
+    .vbox();
+    .box-flex2()
 }

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

@@ -165,5 +165,10 h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch
 .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;}
 .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;}
 .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
+.hbox{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;}
+.hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;}
+.vbox{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;}
+.vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;}
 div.widget_area{page-break-inside:avoid;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;}
+div.widget_item{display:inline-block;}
 div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}

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

@@ -1584,4 +1584,10 span#checkpoint_status,span#autosave_status{font-size:small;}
 .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;}
 .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;}
 .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
+.hbox{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;}
+.hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;}
+.vbox{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;}
+.vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;}
+div.widget_area{page-break-inside:avoid;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;}
+div.widget_item{display:inline-block;}
 div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}

IPython/html/widgets/widget_container.py

@@ -4,7 +4,39 from IPython.utils.traitlets import Unicode, Bool
 class ContainerWidget(Widget):
     target_name = Unicode('container_widget')
     default_view_name = Unicode('ContainerView')
-    _keys = ['vbox', 'hbox']
+    _keys = ['_vbox', '_hbox', '_start', '_end', '_center']
+    _trait_changing = False
 
-    hbox = Bool(True)
-    vbox = Bool(False)
  No newline at end of file
+    _hbox = Bool(False)
+    _vbox = Bool(False)
+    _start = Bool(False)
+    _end = Bool(False)
+    _center = Bool(False)
+    
+    def hbox(self, enabled=True):
+        self._hbox = enabled
+        if enabled:
+            self._vbox = False
+    
+    def vbox(self, enabled=True):
+        self._vbox = enabled
+        if enabled:
+            self._hbox = False
+            
+    def start(self, enabled=True):
+        self._start = enabled
+        if enabled:
+            self._end = False
+            self._center = False
+            
+    def end(self, enabled=True):
+        self._end = enabled
+        if enabled:
+            self._start = False
+            self._center = False
+            
+    def center(self, enabled=True):
+        self._center = enabled
+        if enabled:
+            self._start = False
+            self._end = False