diff --git a/IPython/html/static/notebook/js/widgets/container.js b/IPython/html/static/notebook/js/widgets/container.js
index f22e3f0..9702a87 100644
--- a/IPython/html/static/notebook/js/widgets/container.js
+++ b/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]);
+ }
}
},
});
diff --git a/IPython/html/static/notebook/less/widgetarea.less b/IPython/html/static/notebook/less/widgetarea.less
index dd2c3e5..07e8979 100644
--- a/IPython/html/static/notebook/less/widgetarea.less
+++ b/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()
}
diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index 51194fe..6bf6b6f 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/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;}
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index fefd7be..40fa54e 100644
--- a/IPython/html/static/style/style.min.css
+++ b/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;}
diff --git a/IPython/html/widgets/widget_container.py b/IPython/html/widgets/widget_container.py
index 2131a53..bb37dc9 100644
--- a/IPython/html/widgets/widget_container.py
+++ b/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