Justify Content

The justify-content property in CSS is used to align flex items along the main axis of a flex container.

  • It helps distribute space between and around content items, enhancing layout customization.

  • This property is applicable only to flexbox layouts and CSS grid containers.

  • It's crucial for creating responsive designs by managing space distribution dynamically across various screen sizes.

  • Proper use improves the visual coherence and readability of layout content.

Justify Content in Workmaster

In Workmaster, the Justify Content property works the same way—it manages the alignment of child widgets within a parent container along the main axis.

Possible Values

Visual Representation
Value
Description

Start

Items are packed toward the start of the flex container's main axis.

End

Items are packed toward the end of the flex container's main axis.

Center

Items are centered along the main axis.

Space Between

Items are evenly distributed; first item is at the start, last item is at the end.

Space Around

Items are evenly distributed with equal space around them.

Space Evenly

Items are distributed so that the spaces between items are equal.

Examples

1. Start


2. Center


3. End


4. Space Between


5. Space Evenly


6. Space Around

Last updated