from ipywidgets import *
words = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed " +
"do eiusmod tempor incididunt ut labore et dolore magna aliqua.").split(' ')
items = [HTML('''
<div style="background-color: steelblue;
padding: 5px;
color: white;
font-size: large;
min-height: 22px;
text-align: center;">
%s
</div>
''' % w) for w in words]
layout = Layout(display='flex', flex_flow='column')
box = Box(children=items, layout=layout)
box
# center
box.layout.align_items = 'center'
# flex-end
box.layout.align_items = 'flex-end'
# stretch
box.layout.align_items = 'stretch'
# back to default flex-start
box.layout.align_items = 'flex-start'
# back to stretch with smaller width and border
box.layout.border = 'solid 4px'
box.layout.width = '400px'
box.layout.align_items = 'stretch'
layout = Layout(display='flex', flex_flow='row', width='50%', overflow='hidden', border='solid')
box = Box(children=items, layout=layout)
box
box.layout.flex_flow = 'row wrap'
items = [HTML('''
<div style="background-color: steelblue;
padding: 5px;
color: white;
font-size: large;
height: 50px;
text-align: center;">
%s
</div>
''' % w) for w in ['left', 'middle', 'right']]
for item in items:
item.layout.flex = '1 1 auto'
layout = Layout(display='flex', flex_flow='row', overflow='hidden')
box = Box(children=items, layout=layout)
box
items[1].layout.flex = '2 1 auto'