Align Content

align-content controls how multiple lines of items are aligned along the cross axis (typically vertical) inside a flex or grid container.

It only applies when items wrap onto more than one line.

Works Only When:

The container has multiple lines of items (from flex-wrap: wrap or grid rows).
The container has extra space along the cross axis.

Align Content in Workmaster

In Workmaster, the Align Content property is represented visually using alignment icons, just like in design tools.

It mirrors CSS behavior and is only available when Flex or Grid layout is active and the content wraps into multiple lines.

This is a Conditional Value field. Such fields allow you to specify values directly OR use a Formula to specify a value. Conditional values are useful for specifying different values for changing situations, such as varying device types or screen sizes.

Possible Values

Visual Representation

Value

Description

Baseline

Aligns rows based on the baseline of their content (usually the text baseline).

Start

Packs all rows at the beginning of the container’s cross axis.

Center

Centers all rows in the container along the cross axis.

End

Packs all rows at the end of the container’s cross axis.

Space Between

Distributes rows evenly.

Space Evenly

Distributes rows so that equal space exists between and around all rows.

Space Around

Rows are spaced with equal space around them.

Examples

Initial Layout with Multiple Widgets

Several widgets are placed inside a container each with 35% width. The container's Display property is set to Flex and Flex Wrap is set to Wrap .