Align Content

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

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.

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 .


1. Baseline


2. Start


3. Center


4. End


5. Space Between


6. Space Evenly


7. Space Around

Last updated