6.2. Flow Layout

The flow body layout arranges the body cells in a line until a maximum width is exceeded. At that point, they wrap to the next line. The layout is useful for bullet-separated collections of names and everything else that doesn’t fit into a fixed grid, like logos with varying aspect ratios.

Flow layout example

Flow Direction

By default, cells flow from left to right, but that can be changed to right-to-left.

Setting demonstration

Justify Lines

This setting controls whether the cells in each line should be justified left or right, centered, or fully justified. In the latter case, the last line’s justification can be controlled separately.

Setting demonstration

Square Cells

This setting forces all cells to be square and also have the same size, which can sometimes be useful for logos.

Setting demonstration

Match Cell Width/Height

These settings force cells to have them same width respectively height. The first option only affects cells inside the same block. The second option affects cells across all blocks with the same content style. This can be further broadened to include other content styles.

To break the enforcement at some point, use the @Break Match column in the Credits spreadsheet.

Setting demonstration

Justify/Align Cells

These settings control whether content should be justified left/center/right and aligned top/middle/bottom inside the cells. It also applies to the separator text. The settings are of course only effective when the cells are actually larger than the content, which is not always the case.

Setting demonstration

Line Width

When the cells in a line exceeds this width, it is wrapped automatically. Red layout guides indicate the configured width.

Setting demonstration

Line/Horizontal Gap

This amount of blank pixels is inserted vertically between lines respectively horizontally between cells.

Setting demonstration


This text is placed horizontally in between cells. It doesn’t contribute to the cell spacing.

Setting demonstration