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]

Column Layout

Natural width for items

In [3]:
layout = Layout(display='flex', flex_flow='column')
box = Box(children=items, layout=layout)
box

Align items

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'

Row Layout

No wrap

In [9]:
layout = Layout(display='flex', flex_flow='row', width='50%', overflow='hidden', border='solid')
box = Box(children=items, layout=layout)
box

Wrapping

In [10]:
box.layout.flex_flow = 'row wrap'

Flex grow

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'