< Layout and Styling of Jupyter widgets | Contents | OPTIONAL - Widget label styling >

More about the flexbox layout¶

The flexbox layout enables you to make extensive changes to the appearance of a widget by making changes to its layout.

Acknowledgement¶

The following material on the flexbox layout follows the lines of the article A Complete Guide to Flexbox by Chris Coyier, and uses text and various images from the article with permission.

Basics and terminology¶

The flexbox layout spec is excellent for laying out items in a single direction, either horizontally or vertically.

Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as "flex container") whereas the others are meant to be set on the children (known as "flex items"). If regular layout is based on both block and inline flow directions, the flex layout is based on "flex-flow directions". Please have a look at this figure from the specification, explaining the main idea behind the flex layout.

Basically, items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).

• main axis - The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).
• main-start | main-end - The flex items are placed within the container starting from main-start and going to main-end.
• main size - A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.

cross axis - The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.

• cross-start | cross-end - Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
• cross size - The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

The VBox and HBox helpers¶

The VBox and HBox helper classes provide simple defaults to arrange child widgets in vertical and horizontal boxes. They are roughly equivalent to:

def VBox(*pargs, **kwargs):
    """Displays multiple widgets vertically using the flexible box model."""
    box = Box(*pargs, **kwargs)
    box.layout.display = 'flex'
    box.layout.flex_flow = 'column'
    box.layout.align_items = 'stretch'
    return box

def HBox(*pargs, **kwargs):
    """Displays multiple widgets horizontally using the flexible box model."""
    box = Box(*pargs, **kwargs)
    box.layout.display = 'flex'
    box.layout.align_items = 'stretch'
    return box

Note in particular that it is the flex_flow that controls whether box children are arranged in a row (for HBox) or a column (for VBox).

Examples¶

Three buttons in an HBox, items flex proportionally to their weight¶

Couple of different ways to position items in the container¶

A toolbar with three buttons and a status indicator¶

Align status to right

A carousel¶

A widget for exploring layout options¶

Use the dropdowns and sliders in the widget to change the layout of the box containing the colored buttons. Many of the CSS layout options described above are available, and the Python code to generate a Layout object reflecting the settings is in a TextArea in the widget.

A few questions to answer after the demonstration of this (see the detailed flexbox guide for a longer discussion):

1. What does changing justify_content affect? You may find it easier to answer this if you set wrap to wrap.
2. What does align_items affect?
3. How is align_content different than align_items?

Exercises¶

Four buttons in a box revisited: Change order and orientation¶

This example, from earlier in this notebook, lays out 4 buttons vertically.

Flexbox allows you to change the order and orientation of the children items in the flexbox without changing the children themselves.

1. Change the flex_flow so that the buttons are displayed in a single column in reverse order.
2. Change the flex_flow so that the buttons are displayed in a single row instead of a column.
3. Try setting a few values of align_items and describe how it affects the display of the buttons.
4. Make the box narrower by changing the width, then change flex_flow to lay out the buttons in rows that wrap so that there is a 2x2 grid of buttons.

Feel free to figure out the layout using the tool above and copy/paste the layout here!

Carousel revisited: item layout¶

The code that generated the carousel is reproduced below. Run the cell, then continue reading.

To do:

1. Change the min_width for one of the items, say the first one. Does it affect only the first one, or all of them? Why?
2. Change the height of only the first button. Hint: It needs its own Layout.

< Layout and Styling of Jupyter widgets | Contents | OPTIONAL - Widget label styling >