This topic provides information on Justify Content (justify-content).

Controls distribution along the main axis

CSS Equivalent:

justify-content: flex-start | center | flex-end | space-between | space-around;

Figma Concept:

Managed via the Spacing Mode in Auto Layout.

How to Set in Figma:

1. Select the Auto Layout frame
2. Open the Spacing Mode dropdown
3. Options:
   1. Packed → flex-start
   2. Space Between → space-between
   3. Center → center

Note:

on space-around:

Figma doesn’t directly support space-around, but the plugin maps it if:

The container’s padding equals twice the gap between items

Figure 7-5 Justify Content (justify-content)- (reference for space-between)

Description of "Figure 7-5 Justify Content (justify-content)- (reference for space-between)"

Figure 7-6 Justify Content (justify-content)- (reference for flex-start)

Description of "Figure 7-6 Justify Content (justify-content)- (reference for flex-start)"