In [1]:
from ipywidgets import *
In [2]:
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]
In [3]:
layout = Layout(display='flex', flex_flow='column')
box = Box(children=items, layout=layout)
box
In [4]:
# center
box.layout.align_items = 'center'
In [5]:
# flex-end
box.layout.align_items = 'flex-end'
In [6]:
# stretch
box.layout.align_items = 'stretch'
In [7]:
# back to default flex-start
box.layout.align_items = 'flex-start'
In [8]:
# back to stretch with smaller width and border
box.layout.border = 'solid 4px'
box.layout.width = '400px'
box.layout.align_items = 'stretch'
In [10]:
# Add a max_width attribute to the first item
items[0].layout.max_width = '90px'
In [9]:
layout = Layout(display='flex', flex_flow='row', width='50%', overflow='hidden', border='solid')
box = Box(children=items, layout=layout)
box
In [10]:
box.layout.flex_flow = 'row wrap'
In [11]:
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'
In [12]:
layout = Layout(display='flex', flex_flow='row', overflow='hidden')
box = Box(children=items, layout=layout)
box
In [13]:
items[1].layout.flex = '2 1 auto'