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.
Possible Values

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