diff --git a/IPython/html/static/base/less/flexbox.less b/IPython/html/static/base/less/flexbox.less
index 3d84ce2..cb3acb4 100644
--- a/IPython/html/static/base/less/flexbox.less
+++ b/IPython/html/static/base/less/flexbox.less
@@ -104,19 +104,19 @@
/* 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;
diff --git a/IPython/html/static/notebook/js/widgets/container.js b/IPython/html/static/notebook/js/widgets/container.js
index 0e0e44a..7c6e6a2 100644
--- a/IPython/html/static/notebook/js/widgets/container.js
+++ b/IPython/html/static/notebook/js/widgets/container.js
@@ -19,9 +19,12 @@ 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);
},
diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index d0f6455..cb91e7c 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -19,6 +19,7 @@
.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 @@ 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;}
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 11b08dd..ee6ae37 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -1386,6 +1386,7 @@ 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 @@ 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;}
diff --git a/IPython/html/widgets/widget_container.py b/IPython/html/widgets/widget_container.py
index e16d2d4..7f5929e 100644
--- a/IPython/html/widgets/widget_container.py
+++ b/IPython/html/widgets/widget_container.py
@@ -26,7 +26,8 @@ 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 @@ 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 @@ 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