Justify Content

Utilities for controlling how flex items are positioned along a container's main axis.

Class	Properties
.jc-start	justify-content: flex-start;
.jc-center	justify-content: center;
.jc-end	justify-content: flex-end;
.jc-between	justify-content: space-between;
.jc-around	justify-content: space-around;

Start

Use .jc-start to justify items against the start of the flex container's main axis.

1

2

3

Center

Use .jc-center to justify items along the center of the flex container's main axis.

1

2

3

End

Use .jc-end to justify items against the end of the flex container's main axis.

1

2

3

Space between

Use .jc-between to justify items along the flex container's main axis such that there is an equal amount of space between each item.

1

2

3

Space around

Use .jc-around to justify items along the flex container's main axis such that there is an equal amount of space around each item.

1

2

3

Responsive

To justify flex items at a specific breakpoint, add @{breakpoint} add the end of the utility class.

1

2

3

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.